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


Answers


Eche un vistazo a este complemento (el complemento jquery numérico de Fork of texotela) . Este (jStepper) es otro.

Este 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, 190]) !== -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 el <input type="number"> incorporado y usar las propiedades mínima y máxima para controlar el valor mínimo y máximo.

Lo siguiente se minimiza y también permite el uso de CTRL + x , CTRL + c y CTRL + v

$(function() {
  $('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||(/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>




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();



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




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();
    }



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.






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, '');
  });



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




Yo uso esto en nuestro archivo js común interno. Solo agrego la clase a cualquier entrada que necesite este comportamiento.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});



Más simple para mí es

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});



¿Por qué tan complicado? Ni siquiera necesita jQuery porque hay un atributo de patrón HTML5:

<input type="text" pattern="[0-9]*">

Lo bueno es que muestra un teclado numérico en los dispositivos móviles, que es mucho mejor que usar jQuery.




Puedes hacer lo mismo usando esta solución muy simple

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Me referí a este enlace para la solución. ¡Funciona perfectamente!







El atributo de patrón en HTML5 especifica una expresión regular con la que se compara el valor del elemento.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Nota: El atributo de patrón funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico y contraseña.

  • [0-9] se puede reemplazar con cualquier condición de expresión regular.

  • {1,3} representa un mínimo de 1 y se puede ingresar un máximo de 3 dígitos.




Algo bastante simple usando jQuery.validate

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');



función suppressNonNumericInput (evento) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}



Llegué a una solución muy buena y simple que no evita que el usuario seleccione texto o copie pegar como lo hacen otras soluciones. jQuery style :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server



Puedes usar esta función de JavaScript:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

Y puede vincularlo a su cuadro de texto de esta manera:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

Uso lo anterior en producción, y funciona perfectamente, y es un navegador cruzado. Además, no depende de jQuery, por lo que puede vincularlo a su cuadro de texto con JavaScript en línea:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>



Creo que ayudará a todos

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })



Aquí hay una solución rápida que creé hace un tiempo. Puedes leer más sobre esto en mi artículo:

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});



Aquí hay una respuesta que usa la fábrica de Widget jQuery UI. Puedes personalizar los personajes que están permitidos fácilmente.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Eso permitiría números, signos numéricos y cantidades en dólares.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});



Quería ayudar un poco, e hice mi versión, la función onlyNumbers ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

Solo agregue la etiqueta de entrada "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." y ha terminado;)




Escribí el mío basado en la publicación anterior de @ user261922, ligeramente modificada para que pueda seleccionar todas las pestañas y pueda manejar múltiples campos "solo números" en la misma página.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});



También me gustaría responder :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

Eso es todo ... solo números. :) Casi puede funcionar solo con el 'desenfoque', pero ...




Desea permitir la pestaña:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // 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.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});



Esto parece irrompible.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});



Una manera simple de verificar que el valor ingresado sea numérico es:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }



Solo necesita aplicar este método en Jquery y puede validar su cuadro de texto para solo aceptar números.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Prueba esta solución aquí




Puede probar la entrada de número HTML5:

<input type="number" placeholder="enter the number" min="0" max="9">

Este elemento de etiqueta de entrada ahora tomaría valor solo entre 0 y 9, ya que el atributo mínimo se establece en 0 y el atributo máximo se establece en 9.

Para obtener más información, visite http://www.w3schools.com/html/html_form_input_types.asp




Necesita asegurarse de que tiene el teclado numérico y la tecla de tabulación funcionando también

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // 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.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }