only - ¿Cómo permitir solo numérico(0-9) en el cuadro de entrada HTML usando jQuery?

solo numeros jquery keypress

Question

Estoy creando una página web en la que 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?

Answer 1

¿Por qué tan complicado? Ni siquiera necesitas 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.

Answer 2

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

Answer 3

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

A continuación, puede adjuntarlo a su control haciendo:

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

Answer 4

Aquí hay una respuesta que utiliza jQuery UI Widget factory. Puede personalizar qué caracteres se permiten fácilmente.

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

Eso permitiría números, signos de números y montos 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;
    }
});

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

Eche un vistazo a este complemento (bifurcación del complemento de jQuery numérico de texotela) . Este (jStepper) es otro.

This 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 utiliza HTML5, puede usar el <input type="number"> incorporado y usar las propiedades min y max para controlar el valor mínimo y máximo.

Lo siguiente está minimizado 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])||(/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>

Answer 10

El atributo de patrón en HTML5 especifica una expresión regular contra la cual se verifica 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 el mínimo de 1 y se puede ingresar un máximo de 3 dígitos.

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

Llegué a una solución muy buena y simple que no impide que el usuario seleccione texto o copie pegado 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

Answer 15

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

o para clave de 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();
    }

Answer 16

Puede utilizar 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 puedes enlazarlo a tu cuadro de texto así:

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

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

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

Answer 17

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

Answer 18

Puedes probar la entrada del number HTML5:

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

Para los navegadores que no cumplen con los requisitos, hay Modernizr y Webforms2 .

Answer 19

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

Answer 20

Quería ayudar un poco, e hice mi versión, la onlyNumbers función de 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);
}

Simplemente agregue la etiqueta de entrada "... input ... id =" price "onkeydown =" return onlyNumbers (evento) "..." y listo;)

Answer 21

Se puede usar en el evento de entrada de esta manera:

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

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

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

Answer 22

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

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

Prueba esta solución here

Answer 23

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 ... sólo números. :) Casi puede funcionar solo con el ''desenfoque'', pero ...

Answer 24

Una forma simple de verificar que el valor de entrada es numérico es:

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

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

Answer 25

Una más simple para mí es

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

Answer 26

Usa la función de 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 que usa jQuery: Restricción de la entrada en cuadros de texto HTML a valores numéricos

Answer 27

Usted querría 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(); 
        }   
    }
});

Answer 28

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

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

Answer 29

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

Answer 30

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