¿Cuál es la mejor manera de restringir la entrada de "número" solo para cuadros de texto?

Estoy buscando algo que permita puntos decimales.

Veo muchos ejemplos. Pero todavía tengo que decidir cuál usar.

Actualización de Praveen Jeganathan

No más complementos, jQuery ha implementado su propio jQuery.isNumeric()agregado en v1.7. Ver: https://stackoverflow.com/a/20186188/66767

Actualizar

Hay una solución nueva y muy simple para esto:

Le permite utilizar cualquier tipo de filtro de entrada en un texto <input>, incluidos varios filtros numéricos. Esto manejará correctamente Copiar + Pegar, Arrastrar + Soltar, métodos abreviados de teclado, operaciones de menú contextual, teclas que no se pueden escribir y todos los diseños de teclado.

Vea esta respuesta o pruébela usted mismo en JSFiddle .

Complemento jquery.numeric

He implementado con éxito muchos formularios con el complemento jquery.numeric .

$(document).ready(function(){
    $(".numeric").numeric();
});

Además, esto también funciona con áreas de texto.

Sin embargo, tenga en cuenta que Ctrl + A, Copiar + Pegar (a través del menú contextual) y Arrastrar + Soltar no funcionarán como se esperaba.

HTML 5

Con un soporte más amplio para el estándar HTML 5, podemos usar patternatributos y numbertipos para inputelementos para restringir la entrada de solo números. En algunos navegadores (especialmente Google Chrome), también funciona para restringir el pegado de contenido no numérico. Más información sobre numbery otros tipos de entrada más nuevos está disponible aquí .

Si desea restringir la entrada (a diferencia de la validación), podría trabajar con los eventos clave. algo como esto:

<input type="text" class="numbersOnly" value="" />

Y:

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

Esto inmediatamente le permite al usuario saber que no puede ingresar caracteres alfabéticos, etc., en lugar de hacerlo más tarde durante la fase de validación.

Todavía querrá validar porque la entrada puede completarse cortando y pegando con el mouse o posiblemente con un autocompletador de formularios que puede no activar los eventos clave.

Pensé que la mejor respuesta era la de arriba para hacer esto.

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

pero estoy de acuerdo en que es un poco doloroso que las teclas de flecha y el botón de borrar coloquen el cursor al final de la cadena (y por eso me lo devolvieron en las pruebas)

Agregué en un cambio simple

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

de esta manera, si se presiona cualquier botón que no va a cambiar el texto, simplemente ignórelo. Con esto, puede presionar flechas y eliminar sin saltar al final, pero borra cualquier texto no numérico.

El complemento jquery.numeric tiene algunos errores que notifiqué al autor. Permite múltiples puntos decimales en Safari y Opera, y no puede escribir retroceso, teclas de flecha u otros caracteres de control en Opera. Necesitaba una entrada entera positiva, así que terminé escribiendo la mía al final.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

No más complementos, jQuery ha implementado su propio jQuery.isNumeric () agregado en v1.7.

jQuery.isNumeric( value )

Determina si su argumento es un número.

Resultados de muestras

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

Aquí hay un ejemplo de cómo vincular isNumeric () con el detector de eventos

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

El complemento numeric () mencionado anteriormente no funciona en Opera (no puede retroceder, eliminar o incluso usar las teclas de retroceso o avance).

El siguiente código en JQuery o Javascript funcionará perfectamente (y solo son dos líneas).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Por supuesto, esto es solo para la entrada numérica pura (más teclas de retroceso, eliminación, avance / retroceso), pero se puede cambiar fácilmente para incluir puntos y caracteres menos.

Puede usar el complemento Validación con su método number () .

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

No es necesario el código largo para la restricción de entrada de número, solo intente este código.

También acepta valores válidos int y float de ambos valores.

Enfoque Javascript

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Enfoque jQuery

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

ACTUALIZAR

Las respuestas anteriores son para el caso de uso más común: validar la entrada como un número.

Pero a continuación se muestra el fragmento de código para casos de uso especiales.

• Permitir números negativos
• Mostrar la pulsación de teclado no válida antes de eliminarla.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

A continuación se muestra lo que utilizo para bloquear literalmente las pulsaciones de teclas. Esto solo permite números 0-9 y un punto decimal. Fácil de implementar, no tiene mucho código y funciona de maravilla:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

Como una ligera mejora a esta sugerencia , puede usar el complemento de Validación con su número () , dígitos y métodos de rango . Por ejemplo, lo siguiente garantiza que obtenga un número entero positivo entre 0 y 50:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

No ves alfabetos apariencia mágica y desaparición en la tecla hacia abajo. Esto también funciona en la pasta del mouse.

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Primero intenté resolver esto usando jQuery, pero no estaba contento con los caracteres no deseados (sin dígitos) que realmente aparecían en el campo de entrada justo antes de ser eliminados en el keyup.

Buscando otras soluciones encontré esto:

Enteros (no negativos)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Fuente: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Ejemplo en vivo: http://jsfiddle.net/u8sZq/

Puntos decimales (no negativos)

Para permitir un solo punto decimal, puede hacer algo como esto:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Fuente: Acabo de escribir esto. Parece estar funcionando. Ejemplo en vivo: http://jsfiddle.net/tjBsF/

Otras personalizaciones

• Para permitir que se escriban más símbolos, simplemente agréguelos a la expresión regular que actúa como filtro de código de caracteres básico.
• Para implementar restricciones contextuales simples, observe el contenido (estado) actual del campo de entrada (oToCheckField.value)

Algunas cosas que te pueden interesar:

• Solo se permite un punto decimal
• Permita el signo menos solo si se coloca al comienzo de la cadena. Esto permitiría números negativos.

Deficiencias

• La posición del cursor no está disponible dentro de la función. Esto redujo en gran medida las restricciones contextuales que puede implementar (por ejemplo, no hay dos símbolos iguales consecutivos). No estoy seguro de cuál es la mejor manera de acceder.

Sé que el título pide soluciones jQuery, pero espero que a alguien le resulte útil de todos modos.

Gracias por el post Dave Aaron Smith

Edité su respuesta para aceptar el punto decimal y los números de la sección de números. Este trabajo es perfecto para mi.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

Y aplique esto en todas las entradas que desee:

$('selector').ForceNumericOnly();

HTML5 admite el número de tipo de entrada con soporte de navegador global 88% + según CanIUse a partir de octubre de 2015.

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

Esta no es una solución relacionada con JQuery, pero la ventaja es que en los teléfonos móviles el teclado de Android estará optimizado para ingresar números.

Alternativamente, es posible usar texto de tipo de entrada con el nuevo parámetro "patrón". Más detalles en la especificación HTML5.

Creo que es mejor que la solución jquery, ya que en esta pregunta la solución jquery proporcionada no admite miles de separadores. Si puedes usar html5.

JSFiddle: https://jsfiddle.net/p1ue8qxj/

Esta función hace lo mismo, usa algunas de las ideas anteriores.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• mostrar comentarios visuales (aparece una letra incorrecta antes de desaparecer)
• permite decimales
• atrapa múltiples "."
• no tiene problemas con izquierda / derecha del etc.

/ * esta es mi versión de navegador cruzado de ¿Cómo permitir solo números (0-9) en el cuadro de entrada HTML usando jQuery?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

Simplemente ejecute el contenido a través de parseFloat (). Volverá NaNcon una entrada no válida.

Puede usar autoNumeric desde decorplanit.com . Tienen un buen soporte para numérico, así como moneda, redondeo, etc.

Lo he usado en un entorno IE6, con pocos ajustes de CSS, y fue un éxito razonable.

Por ejemplo, se numericInputpodría definir una clase css y se podría usar para decorar sus campos con las máscaras de entrada numérica.

adaptado del sitio web autoNumeric:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

Creo que esta es una buena manera de resolver este problema y es extremadamente simple:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Ejemplo: JSFiddle

Escenarios cubiertos

La mayoría de las recomendaciones similares aquí fallan al menos una de estas o requieren mucho código para cubrir todos estos escenarios.

1. Solo permite 1 punto decimal.
2. Permite home, endy las arrowllaves.
3. Permite deletey backspacepara ser utilizado en cualquier índice.
4. Permite editar en cualquier índice (siempre que la entrada coincida con la expresión regular).
5. Permite ctrl + v y shift + insert para una entrada válida (lo mismo con clic derecho + pegar).
6. No parpadea el valor del texto porque el keyupevento no se usa.
7. Restaura la selección después de una entrada no válida.

Escenarios fallidos

• Comenzar 0.5y eliminar solo el cero no funcionará. Esto se puede solucionar cambiando la expresión regular a /^[0-9]*\.?[0-9]*$/y luego agregando un evento de desenfoque para anteponer un 0cuando el cuadro de texto comienza con un punto decimal (si lo desea). Vea este escenario avanzado para una mejor idea de cómo solucionar esto.

Enchufar

Creé este simple complemento jquery para hacer esto más fácil:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

La mejor manera es verificar los contenidos del cuadro de texto cada vez que pierde el foco.

Puede verificar si el contenido es un "número" utilizando una expresión regular.

O puede usar el complemento de Validación, que básicamente hace esto automáticamente.

Verifique este código de búsqueda para el uso de la base de datos:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

Este es un fragmento que acabo de hacer (usando una parte del código de Peter Mortensen / Keith Bentrup) para una validación de porcentaje entero en un campo de texto (se requiere jQuery):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

Este código:

• Permite usar las teclas numéricas principales y el teclado numérico.
• Valida para excluir caracteres numéricos Mayús (ej. #, $,%, Etc.)
• Reemplaza los valores de NaN por 0
• Reemplaza por 100 valores superiores a 100

Espero que esto ayude a los necesitados.

Encontré una gran solución aquí http://ajax911.com/numbers-numeric-field-jquery/

Acabo de cambiar el "keyup" a "keydown" según mi requisito

Si está utilizando HTML5, no necesita hacer grandes esfuerzos para realizar la validación. Solo usa -

<input type="number" step="any" />

El atributo de paso permite que el punto decimal sea válido.

Otra forma de mantener la posición de intercalación en la entrada:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Ventajas:

1. El usuario puede usar las teclas de flecha, Retroceso, Eliminar, ...
2. Funciona cuando quieres pegar números

Plunker: Demo trabajando

Acabo de encontrar un complemento aún mejor. Te da mucho más control. Supongamos que tiene un campo DOB donde necesita que sea numérico pero también acepta caracteres "/" o "-".

¡Funciona muy bien!

Compruébelo en http://itgroup.com.ph/alphanumeric/ .

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Este código funcionó bastante bien en mí, solo tuve que agregar los 46 en la matriz controlKeys para usar el período, aunque no creo que sea la mejor manera de hacerlo;)

Usé esto, con buenos resultados ...

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Esto es muy simple porque ya tenemos una función incorporada de JavaScript "isNaN".

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});