6

How can you allow input type="number" to accept something like 1, 2, 3, 55 rather than just regular number with decimal.

I tried using pattern but it didn't seems to work its magic as its still only accepting number and decimal.

Example:
<input type="number" pattern="[0-9]+([\.,][0-9]+)?">

Desired:
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" value="1, 2, 3, 4">
<input type="number" pattern="[0-9]+([\.,][0-9]+)?">
MrNew
  • 1,384
  • 4
  • 21
  • 43
  • 1
    Commas are not supported in `type=number` inputs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number – Jon Uleis Aug 21 '17 at 16:04
  • Is there a work-around to this? – MrNew Aug 21 '17 at 16:05
  • An `input` with the type `number` can only hold one number. That's how it is defined by the specs. Even if it would be possible to get around this limitation, it would be something that you should not do, because you would break the idea of a clearly defined element, and it might fail with any update of the browsers. So if the type `number` does bot fit you requirements then you need to look for another way to solve it. – t.niese Aug 21 '17 at 16:06
  • @t.niese ah right, well I guess I worded my question wrong. Instead how can I prevent someone entering `letter` in the input but allow number and comma `e.g 1, 2, 3` – MrNew Aug 21 '17 at 16:08
  • 1
    Why not just leave it as text and restrict possible values with pattern? At the receiving end, on the server, it really doesnt matter if input type was text, number, hidden or select. – Nawed Khan Aug 21 '17 at 16:08
  • @NawedKhan Yeah I guess that's the best way, if you see my comment above yours. Trying to not let user enter letters in the input. – MrNew Aug 21 '17 at 16:10
  • 1
    I see now. The Pattern is engaged only when form is submitted. You need to do validation on keyup so with every key press you can monitor and validate. Remove alphabets or show warning – Nawed Khan Aug 21 '17 at 16:14

4 Answers4

11

You could use a regular <input type="text"/> with some regex behind it:

var input = document.querySelector('input');
input.addEventListener('input', function() {
  this.value = this.value.replace(/[^0-9 \,]/, '');
});
<input type="text"/>

Regular expression meaning:

[^0-9 \,]    # any character that's not a digit, a space, or a comma
clabe45
  • 2,354
  • 16
  • 27
9

You should just use type=text and validated/format it using js. 

$('input').on('change, keyup', function() {
    var currentInput = $(this).val();
    var fixedInput = currentInput.replace(/[A-Za-z!@#$%^&*()]/g, '');
    $(this).val(fixedInput);
    console.log(fixedInput);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text"/>
aahhaa
  • 2,240
  • 3
  • 19
  • 30
  • 1
    This works fine when using an english keyboard, but if you use Japanese, this doesn't work. It still accept the input character. –  Apr 20 '18 at 07:30
  • 1
    What about something like "....,,,3,4..44,," ? How to remove redundant seperators or only allow one comma/dot? – nonNumericalFloat Jun 28 '21 at 11:22
2

see if this can help you. Patterns are Regular Expressions. Look into regex for more customizations. 

<form>
  <input type="text" pattern="([0-9]+.{0,1}[0-9]*,{0,1})*[0-9]" required>
  <input type="submit">
</form>
heysulo
  • 182
  • 3
  • 14
  • @clabe45 input validations apply the pseudo css classes `:valid` and `:invalid`, so the result of validation is given to the user before they submit the form -> https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation – Purefan Nov 21 '19 at 10:05
0

A chunk of my working html form :

<div class="input-group input-group-auto  col-auto">
    <input class="form-control  text-center"
      oninput="this.value=this.value.replace(/[^0-9,]/g,'');"
      type="text"   id="telefonlar" name="telefonlar" required
    />
</div>

allows only figures , comma and space as you can see in regex expression

CodeToLife
  • 3,672
  • 2
  • 41
  • 29