Pregunta ¿Cómo permitir solo numérico (0-9) en la casilla de entrada HTML usando jQuery?


Estoy creando una página web donde tengo un campo de texto de entrada en el que quiero permitir solo caracteres numéricos como (0,1,2,3,4,5 ... 9) 0-9.

¿Cómo puedo hacer esto usando jQuery?


807


origen


Respuestas:


Echa un vistazo a esto plug-in (fork del plugin jquery numérico de texotela). Esto (jStepper) es otro.

Esta es un enlace si quieres construirlo tú mismo.

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

NOTA: si su página web usa HTML5, puede usar la función incorporada <input type="number"> y usa el min y max propiedades para controlar el valor mínimo y máximo.


Lo siguiente se minimiza y también permite el uso de CTRL+X, CTRL+doy CTRL+V

$(function() {
  $('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110])||(/65|67|86|88/.test(e.keyCode)&&(e.ctrlKey===true||e.metaKey===true))&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="staticParent">
	<input id="child" type="textarea" />
</div>


1124



Aquí está la función que uso:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Luego puede adjuntarlo a su control haciendo:

$("#yourTextBoxName").ForceNumericOnly();

159



En línea:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Estilo discreto (con jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">


126



Simplemente podría usar una expresión regular JavaScript simple para probar caracteres puramente numéricos:

/^[0-9]+$/.test(input);

Esto devuelve verdadero si la entrada es numérica o falsa si no.

o para el código clave del evento, uso simple a continuación:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

99



Puedes usarlo en un evento de entrada como este:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Pero, ¿qué es este privilegio de código?

  • Funciona en navegadores móviles (keydown y keyCode tienen problemas).
  • También funciona en el contenido generado por AJAX, porque estamos usando "on".
  • Mejor rendimiento que la tecla, por ejemplo, en evento de pegado.

64



Use la función de JavaScript isNaN,

if (isNaN($('#inputid').val()))

    if (isNaN (document.getElementById ('inputid'). val ()))

if (isNaN(document.getElementById('inputid').value))

Actualizar: Y aquí un buen artículo hablando de ello pero usando jQuery: Restricción de entrada en cuadros de texto HTML a valores numéricos


43



Corto y dulce, incluso si esto nunca va a encontrar mucha atención después de más de 30 respuestas;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

40



$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Fuente: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values


26