javascript - validacion - La entrada de texto HTML solo permite la entrada numérica

validar solo letras en html

Question

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

Answer 1

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);"/>

Answer 2

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

Answer 3

Código de JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        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();
            }
        }
    }

Código HTML:

<input type=''text'' name=''price'' value=''0'' onkeypress=''validate(event)''/>

funciona perfectamente porque el código de tecla de retroceso es 8 y una expresión de expresión regular no lo permite, por lo que es una manera fácil de evitar el error :)

Answer 4

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

Answer 5

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

Answer 6

HTML5 admite expresiones regulares, por lo que podría utilizar esto:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Advertencia: algunos navegadores no admiten esto todavía.

Answer 7

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.

Answer 8

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

Answer 9

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

adicional usted podría agregar coma, punto y menos (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

Answer 10

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

Answer 11

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

Answer 12

Por favor encuentre la solución mencionada a continuación. En este usuario, solo se puede ingresar un valor numeric . Además, el usuario no puede copy , paste , drag y drop en la entrada.

Personajes permitidos

0,1,2,3,4,5,6,7,8,9

No se permiten personajes y personajes a través de eventos.

• Valor alfabético
• Caracteres especiales
• Dupdo
• Pegar
• Arrastrar
• soltar

$(document).ready(function() {
  $(''#number'').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Déjame saber si no funciona.

Answer 13

Puede reemplazar la función Shurok con:

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

Answer 14

Puedes usar un patrón para esto:

<input id="numbers" pattern="[0-9.]+" type="number">

Aquí puedes ver los consejos completos de la interfaz web móvil .

Answer 15

Recuerde las diferencias regionales (los euros utilizan puntos y comas en sentido inverso como estadounidenses), más el signo menos (o la convención de envolver un número entre paréntesis para indicar negativo), más una notación exponencial (me refiero a eso).

Answer 16

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

Answer 17

Solo otra variante con jQuery usando

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

Answer 18

También puede comparar el valor de entrada (que se trata como una cadena por defecto) a sí mismo como numérico, como:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Sin embargo, es necesario vincular eso a un evento como keyup, etc.

Answer 19

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)

Answer 20

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

Answer 21

Un enfoque más seguro es verificar el valor de la entrada, en lugar de secuestrar las pulsaciones de teclas y tratar de filtrar los códigos de clave.

De esta manera, el usuario puede utilizar libremente las flechas del teclado, las teclas modificadoras, el retroceso, la eliminación, el uso de botes de teclas no estándar, el uso del mouse para pegar, el uso de arrastrar y soltar texto, incluso el uso de entradas de accesibilidad.

El siguiente script permite números positivos y negativos.

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById(''number'');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^/-?/d+/./d*$|^/-?[/d]*$/;
  var number = //-/d+/./d*|/-[/d]*|[/d]+/.[/d]*|[/d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '''';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDITAR: Eliminé mi antigua respuesta porque creo que ahora está anticuada.

Answer 22

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.

Answer 23

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

Answer 24

Utilice este DOM:

<input type = "text" onkeydown = "validate(event)"/>

Y este guión:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... O este script, sin indexOf, usando dos for ''s ...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Utilicé el atributo onkeydown en lugar de onkeypress, porque el atributo onkeydown se verifica antes del atributo onkeypress. El problema estaría en el navegador Google Chrome.

Con el atributo "onkeypress", TAB sería incontrolable con "preventDefault" en google chrome, sin embargo, con el atributo "onkeydown", ¡TAB se vuelve controlable!

Código ASCII para TAB => 9

El primer script tiene menos código que el segundo, sin embargo, la matriz de caracteres ASCII debe tener todas las claves.

El segundo script es mucho más grande que el primero, pero la matriz no necesita todas las claves. El primer dígito en cada posición de la matriz es el número de veces que se leerá cada posición. Por cada lectura, se incrementará 1 a la siguiente. Por ejemplo:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




En el caso de las claves numéricas solo son 10 (0 - 9), pero si fueran 1 millón, no tendría sentido crear una matriz con todas estas claves.

Códigos ASCII:

• 8 ==> (Retroceso);
• 46 => (Eliminar);
• 37 => (flecha izquierda);
• 39 => (flecha derecha);
• 48 - 57 => (números);
• 36 => (hogar);
• 35 => (final);

Answer 25

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.

Answer 26

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

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

Answer 27

input type="number" es un atributo HTML5.

En el otro caso esto te ayudará a:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Answer 28

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

Answer 29

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

Answer 30

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $(''input[name=amount]'').keyup(function(){
        $(this).val($(this).val().replace(/[^/d]/,''''));
    });
</script>