¿Cómo permitir solo números (0-9) en el cuadro de entrada HTML usando jQuery?

901

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?

Prashant
fuente
73
Tenga en cuenta que no puede confiar en la validación del lado del cliente: también debe validar en el servidor en caso de que el usuario tenga desactivado JavaScript o no esté utilizando un navegador compatible con JavaScript.
cjk
45
¿has considerado html5? <input type = "number" />. con atributos
mínimos
55
Creo que debería verificar los valores de entrada en el evento keyup y no verificar los códigos clave, porque es mucho más confiable entre las diferencias en los teclados y lo que no.
Richard
13
Estoy totalmente de acuerdo con Richard: no use códigos de teclas. La respuesta aceptada no funciona en teclados franceses, por ejemplo, ya que debe presionar "Shift" para escribir números en esos teclados. Los códigos clave son demasiado arriesgados, en mi humilde opinión.
MiniQuark
3
@ ZX12R No funciona en ninguna versión actual de IE. Está muy bien usar el último código en sus propias cosas para mantenerse fresco, pero esta no es realmente una opción para casi cualquier proyecto profesional. caniuse.com/#feat=input-number
Eric

Respuestas:

1260

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 .

emkey08
fuente
45
¡Gracias! event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 si quieres decimales
Michael L Watson
99
Agregue los códigos de tecla 37 y 39 para permitir la navegación con flecha izquierda y derecha en el cuadro txt, por ejemplo: if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)
Anthony Queen el
22
ooo, acabo de recoger un problema para esto de nuestros probadores. ¡Debe evitar que el usuario mantenga presionada la tecla Mayús y presione las teclas numéricas, de lo contrario la entrada lo permitirá! @ # $% ^ & * ()
Allen Rice
66
Confirmado el cambio + error. Además, ALT + teclado numérico permite prácticamente cualquier cosa (es decir, Alt + 321 = A, Alt + 322 = B, etc.). Otro caso para la validación del lado del servidor.
Anthony Queen el
140
Realmente no estoy de acuerdo con esta respuesta: es muy arriesgado jugar con códigos de teclas, porque no puedes estar seguro de cuál es la distribución del teclado. Por ejemplo, en los teclados franceses, los usuarios tienen que presionar Mayús para escribir números. Entonces este código no funcionará en absoluto. Entonces, por favor, valide en lugar de este hack de código clave.
MiniQuark
182

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();
Kelsey
fuente
2
Encontré esto útil, pero encontré un molesto "error". Cuando uso esto en mi iMac, permite algunas letras, como aye. Parece que los números del teclado en la PC son letras en el iMac y el teclado de Mac es el mismo que los números normales. Alguien sabe cómo hacerlo funcionar en Mac y PC?
Volmar
3
Las teclas "Inicio", "Fin" tampoco funcionan. Esta es una mejor solución que Peter sugirió: west-wind.com/weblog/posts/2011/Apr/22/…
bman
¿Por qué hay un return this.each(function() ?
powtac
2
@powtac: para que pueda llamar a .ForceNumericOnly () en varios objetos. Por ejemplo ... $ ("input [type = 'text']"). ForceNumericOnly ()
Oliver Pearmain
1
@powtac el eachfrom return this.each(function()es permitir múltiples objetos como dijo HaggleLad, y la returnparte es devolver el objeto jQuery nuevamente a la persona que llama, para permitir el encadenamiento como$("input[type='text'").ForceNumericOnly().show()
Jose Rui Santos
149

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

Patrick Fisher
fuente
2
Esto mueve el cursor hasta el final, incluso si el usuario presiona la tecla de flecha izquierda.
Phrogz
1
@phrogz, intente lo siguiente: onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')".
Patrick Fisher
Esto funciona perfectamente y evita Shift + número a diferencia de los anteriores.
Nick Hartley
55
@ mhenry1384 Ese es el comportamiento esperado. Creo que es una buena respuesta, pero si no te gusta, entonces lo que estás buscando es un enfoque de código clave.
Patrick Fisher
2
Puede modificar a /[^0-9]|^0+(?!$)/gpara evitar series iniciales de cero.
Johny Skovdal
105

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();
    }
Umang
fuente
11
Vea mi respuesta para una implementación de este enfoque.
Patrick Fisher
¿no tomaría menos tiempo del procesador verificar una pulsación numérica en lugar de verificar una expresión regular?
andrsnn
87

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.
Hamid Afarinesh Far
fuente
66
Siento que esta es una solución mucho más robusta (y más simple) que la respuesta aceptada.
Jeremy Harris
Aún más simple si se usa reemplazar (/ \ D / g, '')
Alfergon
hola, ¿cómo puedo estar seguro de valor numérico con un decimalentre 0.0a 24.0Soy incapaz de dejarlo entrar en el.
transformador
Sugeriría usarthis.value = Number(this.value.replace(/\D/g, ''));
HasanG
Buena respuesta, permite alternar fácilmente si una entrada es numérica o no al alternar la clase
raklos
55

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, '');
  });
Rid Iculous
fuente
55
Reemplazaría keyup por entrada, de lo contrario, puede mantener presionada una letra y luego hacer clic para quitar el foco del cuadro de texto y dejar el texto como está. de entrada a asegurar que esto no puede suceder
WizLiz
Gracias por la expresión regular, pero este es un controlador de eventos un poco mejor: $ ('# number_only'). On ('input propertychange', function () {this.value = this.value.replace (/ [^ 0-9] / g, '');});
BradM
3
FYI: la pregunta no lo hizo, pero esto no permite decimales (por ejemplo, 12.75). La vinculación de "entrada" en lugar de "keyup" hace que la experiencia de usuario sea más fluida en lugar de ver a su personaje durante una fracción de segundo y luego eliminarlo.
Paul
44

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

Amr Elgarhy
fuente
40
Bueno ... "No usar JQuery" excepto por la parte de tu ejemplo que usa JQuery ...
GalacticCowboy
document.getElementById('inputid').val() amigo ... eso sigue siendo jquery. .val()Es una cosa jQuery. uso.value
mpen
hola, ¿cómo puedo estar seguro de valor numérico con un decimalentre 0.0a24.0 Soy incapaz de dejarlo entrar en el.
transformador
28
$(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

Ivar
fuente
66
¡Guau, bloques vacíos "si" y números mágicos! Solo vomité un poco en mi boca. : D Pero en serio, ¿por qué tomarse todas estas molestias cuando podría hacer coincidir la entrada con la expresión regular /^[.\dfont>+$/? ¿Y qué representa el '8'?
Alan Moore
@ Alan: Jaja, no tengo idea, copié directamente de la fuente. En su lugar, escribiría "if (event.keyCode! = 46 && event.keyCode! = 8)", o usaría regex como dijiste. Supongo que el 8 representa la clave de eliminación.
Ivar
44
Intente presionar Shift + 8, por ejemplo, su validación permitirá que * ingrese
Anton
Esto es bueno. Sería mucho mejor, si maneja la tecla Shift + Números (caracteres especiales como! @ # $% ^ ..)
Shyju
27

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;
});
Mijk
fuente
1
Código agradable, elegante y útil! Gracias. Pero debe agregar eventos keyup y keydown.
Silvio Delgado
25

Una más simple para mí es

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
Suminved Jain
fuente
77
Solo necesito asegurarme de que usas this.value.replace(/[^0-9\.]/g,'');para incluir los requisitos de OP de 0-9
Chalise
24

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

invitado
fuente
2
Esto debería tener muchos más votos. En todo caso, también podría agregar una expresión regular alternativa para los navegadores que no sean html5, pero la validación de los datos debe manejarse del lado del servidor de todos modos.
Markus
parece que ahora es compatible con la mayoría de los navegadores, por lo que el soporte de modernización no es tan importante: caniuse.com/#search=pattern Safari funciona muy bien a pesar de que está listado como parcialmente compatible en este sitio. ¡Intentalo!
invitado
@ invitado Muchas gracias por esto. ¡La respuesta más rápida y fácil! La mejor respuesta en mi opinión.
BinaryJoe01
19

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!

Ganesh Babu
fuente
Quizás esto es mejor /\d|\./ permitir. números decimales
Zango
Esto funciona perfecto en cromo. Pero no en Mozilla FireFox
Kirataka
hola, ¿cómo puedo estar seguro de valor numérico con un decimalentre 0.0a 24.0Soy incapaz de dejarlo entrar en el.
transformador
no funciona con copiar y pegar
mrid
14

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 .

Vitalii Fedorenko
fuente
esto todavía permite la coma
apfz
14

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.

vickisys
fuente
hola, ¿cómo puedo estar seguro de valor numérico con un decimalentre 0.0a 24.0Soy incapaz de dejarlo entrar en el.
transformador
1
@transformer prueba con este <input type = "number" pattern = "[0-9] + ([\.,] [0-9] +)?" step = "0.01">
vickisys
11

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)');
Adrian
fuente
8

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
    }
}
usuario261922
fuente
hola, ¿cómo puedo estar seguro de valor numérico con un decimalentre 0.0a 24.0Soy incapaz de dejarlo entrar en el.
transformador
8

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
Vincent
fuente
Hola, estoy usando esto, pero lo que realmente estoy buscando es permitir que
salga
8

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()"/>
karim79
fuente
Esto falla cuando alguien pega texto no numérico en la entrada. ¿Alguna idea de cómo podríamos superar esto? No puedo entender mi mente sobre esto.
Kiran Ruth R
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 ;
  })
Como si
fuente
te estás olvidando de la entrada del teclado. Esto incluiría que:if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
tomvo
6

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;
        }
    });
});
jamesbar2
fuente
6

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);
});
Dima
fuente
6

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

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;
    }
});
Mathew Foscarini
fuente
¿Esto garantiza $ y luego + - como primer o primer / segundo carácter y luego solo 1 punto decimal?
gordon el
6

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));
});
Jonathan
fuente
5

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

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

bloqueo
fuente
5

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

Pedro Soares
fuente
5

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;
    }
Pragnesh Rupapara
fuente
5

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í

Jitender Kumar
fuente
5

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

kkk
fuente