How to do an input number excluding the first 0?

2

I have an input that only accepts positive numbers (without decimal or hyphens) but I want to exclude the first zero

<input id="cantidad[1]" NAME="cantidad[1]" class="form-control" type="number" pattern="\d*"/ min="1">
<script type="text/javascript">
    var myInput = document.getElementsByTagName('input')[0];
    myInput.addEventListener('keypress', function(e) {
    var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
    function keyAllowed() {
        var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50,
                    51,52,53,54,55,56,57,91,92,93];
        if (key && keys.indexOf(key) === -1)
            return false;
        else
            return true;
        }
        if (!keyAllowed())
            e.preventDefault();
    }, false);
    // EDIT: Disallow pasting non-number content
    myInput.addEventListener('paste', function(e) {
        var pasteData = e.clipboardData.getData('text/plain');
        if (pasteData.match(/[^0-9]/))
            e.preventDefault();
    }, false);
</script>

Thanks

    
asked by kenethluna 07.07.2016 в 02:51
source

3 answers

1

If you want to delete the leading zeros as they are written, you can check if the last key pressed was a zero, and if it was and the first character of the field is a zero, then eliminate all the leading zeros that you find ..

Using regular expressions, it would suffice to add something like this to the code you already have:

  

This code is only responsible for removing the zeros that are at the beginning of the field, to make sure that it is a number you must continue applying the different checks that you already had in your code, so I say "add to the code that you already have ".

var myInput = document.getElementsByTagName('input')[0];

myInput.addEventListener("keyup", function(e) {

  var key = e.keyCode || e.charCode;
  
  // si la tecla es un cero y el primer carácter es un cero
  if (key == 48 && this.value[0] == "0") {
    // se eliminan los ceros delanteros
    this.value = this.value.replace(/^0+/, '');
  }
  
});
<input id="cantidad[1]" NAME="cantidad[1]" class="form-control" type="number" pattern="\d*"/ min="1">
    
answered by 07.07.2016 / 15:16
source
1

You must use <input type="number"> ... That will reject characters that are not numbers.

To reject the negative numbers, try this:

<input id="myInput" type="number" />
<script type="text/javascript">
    var myInput = document.getElementById('myInput');
    var viejoVal;
    myInput.addEventListener('change', function(e) {
        var val = e.target.value;
      if (val <= 0) {
        e.target.value = viejoVal;
      }
      else {
        viejoVal = val;
      }
    })
</script>

Note: Event change will only be launched when the user defocuses the input.

Link

    
answered by 07.07.2016 в 09:08
0

If you also want to reject numbers that begin with 0, you must modify the regular expression and the condition that you use:

var myInput = document.getElementById('myInput');

myInput.addEventListener('paste', function(e) {
  var pasteData = e.clipboardData.getData('text/plain');
  if (!pasteData.match(/^[1-9][0-9]*$/))
    e.preventDefault();
}, false);
Solo se puede pegar números: <input id="myInput" />
    
answered by 07.07.2016 в 04:07