javascript - validacion - validar solo numeros html5




La entrada de texto HTML solo permite la entrada numérica (20)

2 soluciones:

Utilice un validador de formularios (por ejemplo, con el complemento de validación de jQuery )

Realice una comprobación durante el evento onblur (es decir, cuando el usuario abandona el campo) del campo de entrada, con la expresión regular:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

¿Hay una manera rápida de establecer una entrada de texto HTML ( <input type=text /> ) para permitir solo las pulsaciones numéricas (más '.')?


Aquí hay uno simple que permite exactamente un decimal, pero no más:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />


Esta es la versión extendida de la solución de geowa4 . Soporta atributos min y max . Si el número está fuera de rango, se mostrará el valor anterior.

Puedes probarlo aquí.

Uso: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Si las entradas son dinámicas, usa esto:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

Esta es una función mejorada:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

HTML5 tiene <input type=number> , que suena bien para ti. Actualmente, solo Opera lo admite de forma nativa, pero hay un proyecto que tiene una implementación de JavaScript.


He buscado por mucho tiempo una buena respuesta a esto, y necesitamos desesperadamente <input type="number" , pero aparte de eso, estas 2 son las formas más concisas que podría encontrar:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Si no te gusta el carácter no aceptado que se muestra durante una fracción de segundo antes de ser borrado, el método a continuación es mi solución. Tenga en cuenta las numerosas condiciones adicionales, esto es para evitar deshabilitar todo tipo de navegación y teclas de acceso rápido. Si alguien sabe cómo compactar esto, háganoslo saber!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

La mejor manera (permitir TODOS los tipos de números: negativo real, positivo real, negativo iinteger, positivo entero) es:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Opté por usar una combinación de las dos respuestas mencionadas aquí, es decir

<input type="number" />

y

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">


Puede reemplazar la función Shurok con:

$(".numeric").keypress(function() {
    return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});


Si desea sugerir al dispositivo (tal vez un teléfono móvil) entre alfa o numérico, puede usar <input type="number"> .


Solo otra variante con jQuery usando

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Tan sencillo....

// En una función de JavaScript (puede usar HTML o PHP).

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

En su formulario de entrada:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Con entrada max. (Estos anteriores permiten un número de 12 dígitos)


Un ejemplo más donde puede agregar solo números en el campo de entrada, no puede escribir letras

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Una implementación corta y sencilla que utiliza jQuery y replace () en lugar de mirar event.keyCode o event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Solo un pequeño efecto secundario es que la letra escrita aparece momentáneamente y CTRL / CMD + A parece comportarse un poco extraño.


Usa este DOM

<input type='text' onkeypress='validate(event)' />

Y este guion

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Y un ejemplo más, que funciona muy bien para mí:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

También adjuntar a keypress evento

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Y HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Aquí hay un ejemplo de jsFiddle.


solo use type = "number" ahora este atributo es compatible con la mayoría de los navegadores

<input type="number" maxlength="3" ng-bind="first">

JavaScript (el más confiable aún)

Si bien esto es simple, no le permitirá usar teclas de combinación y otras teclas que no se pueden escribir. Para obtener una solución JavaScript completa que también admita la entrada del número de tipo y la validación de longitud máxima, considere usar este Polyfill .

HTML 5 con <!DOCTYPE html> tiene una solución nativa :

<input type="number">

Tenga en cuenta que no se comporta de forma estándar en algunos navegadores .

Intente ingresar type = number para ver la versión HTML5 en acción.

Vea también https://github.com/jonstipe/number-polyfill para soporte transparente en navegadores antiguos.

jQuery

$(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/cmd+A
            (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+C
            (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+X
            (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // 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();
        }
    });
});

Opciones de validación más complejas.

Si desea hacer algunos otros bits y piezas de validación, esto podría ser útil:

http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input

Pero no olvides que aún debes hacer la validación del lado del servidor.

para el teclado AZERTY:

jQuery

// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+C
    (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+X
    (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39) ||
    //Allow numbers and numbers + shift key
    ((e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105))) {
    // 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();
}

La mayoría de las respuestas aquí tienen la debilidad de usar eventos clave .

Muchas de las respuestas limitarían su capacidad de selección de texto con macros de teclado, copiar y pegar y más comportamientos no deseados; otras parecen depender de complementos específicos de jQuery, que son matar moscas con ametralladoras.

Esta solución simple parece funcionar mejor para mí en todas las plataformas, independientemente del mecanismo de entrada (pulsación de teclas, copiar + pegar, copiar con el botón derecho + pegar, voz a texto, etc.). Todas las macros del teclado de selección de texto seguirían funcionando, e incluso limitarían la capacidad de establecer un valor no numérico por script.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);




html5