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?

^{Nota: esta es una respuesta actualizada. Los comentarios a continuación se refieren a una versión anterior que se equivocó con los códigos clave.}

jQuery

Pruébelo usted mismo en JSFiddle .

No hay una implementación nativa de jQuery para esto, pero puede filtrar los valores de entrada de un texto <input>con el siguiente inputFiltercomplemento (admite Copiar + Pegar, Arrastrar + Soltar, métodos abreviados de teclado, operaciones de menú contextual, teclas no tecleables, la posición del cursor, diferentes diseños de teclado y todos los navegadores desde IE 9 ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

Ahora puede usar el inputFiltercomplemento para instalar un filtro de entrada:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

Vea la demostración JSFiddle para más ejemplos de filtros de entrada. ¡También tenga en cuenta que aún debe hacer la validación del lado del servidor!

JavaScript puro (sin jQuery)

jQuery no es realmente necesario para esto, también puede hacer lo mismo con JavaScript puro. Mira esta respuesta .

HTML 5

HTML 5 tiene una solución nativa con <input type="number">(consulte la especificación ), pero tenga en cuenta que la compatibilidad del navegador varía:

• La mayoría de los navegadores solo validarán la entrada al enviar el formulario, y no al escribir.
• La mayoría de los navegadores móviles no son compatibles con los step, miny maxatributos.
• Chrome (versión 71.0.3578.98) todavía permite al usuario ingresar los caracteres ey Een el campo. También vea esta pregunta .
• Firefox (versión 64.0) y Edge (EdgeHTML versión 17.17134) aún permiten al usuario ingresar cualquier texto en el campo.

Pruébelo usted mismo en w3schools.com .

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

Puede usar una simple expresión regular de JavaScript 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();
    }

Puede usar en eventos 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).
• Funciona también en contenido generado por AJAX, porque estamos usando "on".
• Mejor rendimiento que keydown, por ejemplo, en evento de pegado.

Corto y dulce, incluso si esto nunca 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, '');
  });

Use la función JavaScript isNaN ,

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

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

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

Actualización: Y aquí hay un buen artículo que habla de ello pero usa jQuery: Restricción de entrada en cuadros de texto HTML a valores numéricos

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

Lo uso 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;
});

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

Puede probar la entrada del número HTML5 :

<input type="number" value="0" min="0"> 

Para los navegadores no compatibles, existen fallos de Modernizr y Webforms2 .

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 impide que el usuario seleccione texto o copie y pegue 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

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

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

Escribí el mío basado en la publicación anterior de @ user261922, ligeramente modificado para que pueda seleccionar todo, pestaña y pueda manejar múltiples campos de "solo número" 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;
        }
    });
});

Aquí hay una solución rápida que creé hace algún 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);
});

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

Aquí hay una respuesta que usa jQuery UI Widget factory. Puede personalizar qué caracteres 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;
    }
});

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

Debe asegurarse de que el teclado numérico y la tecla tab también funcionan

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

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

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

Simplemente agregue la etiqueta de entrada "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." y ya está;)

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

La forma simple de verificar que el valor de entrada 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 aceptar solo 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 del número HTML5:

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

Este elemento de etiqueta de entrada ahora solo tomaría un valor entre 0 y 9, ya que el atributo min se establece en 0 y el atributo max se establece en 9.

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