2

Tengo un input que solo acepta numeros positivos (sin decimal ni guiones) pero quiero excluir el primer cero

<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>

Gracias

3
  • 1
    Te refieres a que por defecto no aparezca el valor cero en el? el 7 jul. 2016 a las 1:56
  • 2
    El primer 0 ([0]001234)? o los ceros a la izquierda en enteros ([000]1234)? Si es el primer cero deberás tratar el número como cadena de caracteres y eliminar el primer carácter si es cero; si son todos los ceros a la izquierda de un entero bastaría con hacer un casting a entero en onchange. el 7 jul. 2016 a las 7:53
  • ¿Por qué se permiten caracteres como [, . o ]?
    – Alvaro Montoro
    el 7 jul. 2016 a las 12:34

3 respuestas 3

1

Si lo que quieres es eliminar los ceros delanteros conforme se vayan escribiendo, puedes comprobar si la última tecla pulsada fue un cero, y si lo fue y el primer carácter del campo es un cero, entonces eliminar todos los ceros delanteros que encuentre..

Usando expresiones regulares, bastaría con añadir algo como esto al código que ya tienes:

Este código sólo se encarga de eliminar los ceros que se encuentren al principio del campo, para asegurarte de que sea un número debes seguir aplicando las diferentes comprobaciones que ya tenías en tu código, por eso digo lo de "añadir al código que ya tienes".

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">

1

Debes usar <input type="number">... Ese rechazará caracteres que no son números.

Para rechazar los números negativos, trata este:

<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>

Nota: El evento change soló lanzará cuando el usuario desenfoca al input.

Vínculo

4
  • 1
    input type="number" no rechaza todos los caracteres que no son números; acepta cosas como e, ., - o + porque pueden formar parte de un número.
    – Alvaro Montoro
    el 7 jul. 2016 a las 12:26
  • 1
    Aparte de eso, lo que OP quiere es quitar los ceros delanteros y no los negativos (porque ya lo hace en su código al no permitir el carácter guión)
    – Alvaro Montoro
    el 7 jul. 2016 a las 12:29
  • @AlvaroMontoro Ah, no sabía que input type="number" acepta e o +. Interesante. Quizás OP puede usar una combinación de change, keypress, y paste.
    – Aaron
    el 7 jul. 2016 a las 15:38
  • @AlvaroMontoro Hm, todavía estoy aprendiendo español, por lo que probablemente estoy equivocado, pero OP dijo "Tengo un input que solo acepta números positivos (sin decimal ni guiones)," y interpreté eso como "Quiero rechazar ceros, números negativos, decimales, y guiones."
    – Aaron
    el 7 jul. 2016 a las 15:51
0

Si quieres también rechazar los números que empiecen con 0, debes modificar la expresión regular y la condición que usas:

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" />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.