La entrada de texto HTML solo permite la entrada numérica


852

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


81
Muchas soluciones aquí solo funcionan cuando se presionan las teclas. Estos fallarán si las personas pegan texto usando el menú, o si arrastran y sueltan texto en la entrada de texto. He sido mordido por eso antes. ¡Ten cuidado!
Bennett McElwee

83
@JuliusA - que siempre siempre necesita validación en el servidor de todos modos.
Stephen P

46
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
Droogans

14
@Droogans se da cuenta de que también deshabilita cualquier otra tecla, como TAB para ir a la siguiente entrada o cualquier otro acceso directo que no esté directamente relacionado con la entrada como cmd + R para actualizar el sitio web si la entrada está enfocada.
Alejandro Pérez

1
Si está de acuerdo con Plugin, use NumericInput. Demostración: jsfiddle.net/152sumxu/2 Más detalles aquí stackoverflow.com/a/27561763/82961
Faiz

Respuestas:


1138

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.

JavaScript

Pruébelo usted mismo en JSFiddle .

Puede filtrar los valores de entrada de un texto <input>con la siguiente setInputFilterfunción (admite Copiar + Pegar, Arrastrar + Soltar, métodos abreviados de teclado, operaciones de menú contextual, teclas que no se pueden escribir, la posición del cursor, diferentes diseños de teclado y todos los navegadores desde IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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 = "";
      }
    });
  });
}

Ahora puede usar la setInputFilterfunción para instalar un filtro de entrada:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' 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!

Mecanografiado

Aquí hay una versión de TypeScript de esto.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

También hay una versión jQuery de esto. 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 .


44
Aunque esta sería una buena opción, aún permite ingresar caracteres como /, puntos múltiples, otros operadores, etc.
Mahendra Liya

66
Todavía no es compatible con Firefox 21 (ni siquiera hablo de IE9 o una versión anterior ...)
JBE

67
El número de tipo de entrada no debe usarse para hacer que su entrada solo acepte números. Está destinado a entradas que especifican un 'número de elementos'. Chrome, por ejemplo, agrega dos flechas pequeñas para aumentar o disminuir el número en uno. Una entrada numérica adecuada es una especie de omisión ridícula a HTML.
Erwin

99
El tipo = "número" en realidad no impide ingresar texto no válido en el campo; parece que incluso puede cortar y pegar datos basura en el campo, incluso en cromo.
perfeccionista

66
Lo único que agregaría a esto es cambiar la línea Ctrl + A para incluir a los usuarios de MacOSX:(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))
MForMarlon

281

Usa este DOM

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

Y este guión

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

12
ajustes alemanes en un eeepc 900. algunas teclas para una buena usabilidad no funcionan: - retroceso (código clave: 8) - tecla de navegación izquierda y derecha (código clave: 37, 38) copiar y pegar también es posible ...
Michael Piendl

11
A la mayoría de las personas les importa, que aparezca un error de secuencia de comandos que se refleja mal en su sitio.
Robert Jeppesen

14
Algunos problemas con este código. Puedes entrar . más de una vez, segundo, no permite eliminar la clave, ¿alguna solución?
coure2011

44
Me preocupaba la retroceso, la eliminación y las flechas no funcionaban. Si elimina "theEvent.keycode ||" y agrega: "if (/ [- ~] / &&! Regex.test (key)) {" entonces funciona mejor (para ASCII / UTF de todos modos). ¡Pero entonces no rechazará los caracteres chinos! :)
Sam Watkins

44
esto permite que alguien pegue cosas aleatorias en la entrada
Vitim.us

137

He buscado largamente una buena respuesta a esto, y la 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 le 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) )">

44
input type = "number" llegará en HTML 5, y podría usar JavaScript como un polyfill alternativo
Fenton

55
Buen método, pero puede romperse presionando y sosteniendo una tecla no aceptable
Scott Brown

8
Cambia la expresión regular a /[^\d+]/y funciona manteniendo presionada
boecko

11
@boecko gracias por esto, pero ten en cuenta que debería serlo /[^\d]+/. Buena solución sin embargo. También @ user235859
Mosselman

11
Él también quería permitirlo .. Realmente deberías hacerlo/[^0-9.]/g
Qsario

94

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


12
Manijas: copiar + pegar, arrastrar y soltar, solo permite 1 decimal, tabulador, eliminar, retroceso - use este
Mathemats

¿Se puede extraer esta lógica dentro de la entrada para que pueda usarse globalmente?
ema

@ema: sí, mira mi otra respuesta aquí que muestra cómo puedes aplicar la regla usando la clase.
billynoah

si usa esto en forma angular, el valor no se actualizará en el valor de control de forma.
Ale_info

Increíble. Cambio el evento a this.value = this.value.replace (/ [^ 0-9 .-] / g, '') .replace (/(\..*)\./ g, '$ 1'). reemplazar (/ ^ 0 + / g, '') .replace (/ (? <! ^) - / g, ''); De esta manera maneja solo un - al principio y no permite 0 al comienzo del número.
brenth

54

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

Adjuntar también al evento de pulsación de tecla

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


¿Qué pasa con el texto pegado?
Jason Ebersey

¿Por qué aparece "el evento no está definido" cuando llamo a esta función?
Vincent

1
esto no funciona en Firefox cuando event.keyCode siempre se devuelve 0. Lo arreglé con un nuevo código: function validateNumber (event) {var key = event.which || event.charCode || event.keyCode || 0; if (clave == 8 || clave == 46 || clave == 37 || clave == 39) {return true; } else if (clave <48 || clave> 57) {return false; } devuelve verdadero; };
Luan Nguyen

1
Como @Jessica dijo, puedes agregar apóstrofe e incluso un signo de porcentaje.
Alejandro Nava

1
¡Muy cerca! pero permite más de un decimal.
Kross

52

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


Aquí hay un documento que define qué navegadores admiten este atributo: caniuse.com/input-number . Al momento de escribir esto, Chrome y Safari son totalmente compatibles con este tipo de campo. IE 10 tiene soporte parcial y Firefox no tiene soporte.
Nathan Wallace

El único problema con type=numberes que no es compatible con IE9
J Rod

@JRod Hay un polyfill para IE antiguo. Más información aquí .
jkdev

66
El primer problema es type=numberpermitir el ecarácter porque se considera e+10como número. El segundo problema es que no puede limitar el número máximo de caracteres en la entrada.
Hakan Fıstık

Otro problema es que si el tipo es número, entonces no puedo obtener los beneficios de establecer el tipo en, por ejemplo: "tel".
ScottyBlades

49

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

Muchas de las respuestas limitarían su capacidad de seleccionar texto con macros de teclado, copiar + pegar y más comportamientos no deseados, otras parecen depender de complementos específicos de jQuery, que está matando moscas con ametralladoras.

Esta solución simple parece funcionar mejor para mí multiplataforma, independientemente del mecanismo de entrada (pulsación de tecla, copiar + pegar, hacer clic con el botón derecho copiar + pegar, voz a texto, etc.). Todas las macros de 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);

Se necesita jQuery 1.7+. Esta es una respuesta más completa, ya que tiene en cuenta las entradas a través de "copiar". ¡Y también es más simple!
Memochipan

Una expresión regular alternativa: replace(/[^\d]+/g,'')reemplazar todos los no dígitos con una cadena vacía. El modificador "i" (sin distinción entre mayúsculas y minúsculas) no es necesario.
Memochipan

Esto debería estar en la cima, ya que "onkey" controladores de eventos en una etiqueta no se deben propagar más ...
gpinkas

Esta es definitivamente la mejor respuesta aquí, pero no permite dígitos con números decimales. ¿Alguna idea de cómo podría funcionar?
Atirag

66
@Atirag Si quieres decimales puedes cambiar la expresión regular/[^\d,.]+/
EJTH

41

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


Excelente respuesta ... +1. También puede reducir la declaración if a: return !(charCode > 31 && (charCode < 48 || charCode > 57));
schadeck

77
¿Qué tal si eliminas? Desea números, pero probablemente desee que las personas puedan corregirlos sin actualizar la página ...
Martin Erlic

40

HTML5 admite expresiones regulares, por lo que puede usar esto:

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

Advertencia: algunos navegadores aún no admiten esto.


77
HTML5 también tiene <input type=number>.
Mathias Bynens

Cierto. Deberías hacer de esto una respuesta. Vaya, @ Ms2ger ya lo ha hecho.
james.garriss

El <input type = number> agrega flechas para aumentar y disminuir en ciertos navegadores, por lo que parece una buena solución cuando queremos evitar la ruleta
Ayrad

35
El patrón solo se verifica al enviar. Aún puedes ingresar letras.
Erwin

¿Qué significan los +medios en el atributo de patrón?
PlanetHackers

18

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

No funciona correctamente en los teclados donde uno tiene que usar la tecla Mayús para ingresar un número (por ejemplo, el teclado europeo AZERTY).
Capitán Sensible

gracias hombre, realmente entiendes una pregunta! Buen ejemplo y manejo fuera de curso. o, (lo que la mayoría de la gente quiere si trabaja con números)
real_yggdrasil

Este es el único que funciona que evita pegar valores no numéricos.
DEREK LEE

16

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 máx. (Estos anteriores permiten un número de 12 dígitos)


¡No hagas eso! Esto bloquea todo, el teclado numérico, las teclas de flecha, la tecla Eliminar, los accesos directos (CTRL + A, CTRL + R por ejemplo), ¡incluso la tecla TAB es realmente molesta!
Korri

@ Korri No sigo, ¿cuál parece ser el problema? Funcionó bien en mi caso.
incómodo

la primera línea debe cambiarse a: var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

15

2 soluciones:

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

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

Curiosamente, tuve que dar la expresión regular es "^ \\ d \\.? \\ d * $", pero eso podría deberse a que la página se ejecuta a través de una transformación XSLT.
Paul Tomblin

Creo que la expresión regular es incorrecta. He utilizado esta línea:var regExpr = /^\d+(\.\d*)?$/;
Costa

@costa no está seguro, si el usuario quiere ingresar .123(en lugar de 0.123) por ejemplo?
Romain Linsolas

@romaintaz. Tiene razón, pero luego tendría que cambiar la expresión regular para asegurarse de que, en caso de que no haya ningún dígito delante del punto, haya dígitos después del punto. Algo como esto: var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;.
costa

14

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

De esta forma, el usuario puede usar flechas de teclado, teclas modificadoras, retroceso, eliminar, usar teclados no estándar, usar el mouse para pegar, usar arrastrar y soltar texto, incluso usar 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 respuesta anterior porque creo que ahora es anticuada.


De hecho, esto parece cubrir la mayoría de los casos
Zia Ul Rehman Mughal


13

Encuentre a continuación la solución mencionada. En este usuario solo puede ingresar un numericvalor, tampoco el usuario puedecopy , paste, dragy dropen la entrada.

Caracteres permitidos

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

Personajes no permitidos y personajes a través de eventos

  • Valor alfabético
  • Caracteres especiales
  • Copiar
  • 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">

Avísame si no funciona.


11

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


11

Un ejemplo más donde puede agregar solo números en el campo de entrada, no puede 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');">

10

Una implementación breve y dulce usando 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.


9

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

la primera línea debe cambiarse a:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

9

Código 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 retroceso es 8 y una expresión regex no lo permite, por lo que es una forma fácil de evitar el error :)


9

Una manera fácil de resolver este problema es implementar una función jQuery para validar con regex los caracteres escritos en el cuadro de texto, por ejemplo:

Tu código html:

<input class="integerInput" type="text">

Y la función js usando jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });
<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		


8

Solo otra variante con jQuery usando

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

8

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

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

No he verificado los datos es --1(2 menos caracteres antes de 1).
Ngoc Nam

6

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

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

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


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

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

6

Vi algunas respuestas excelentes, sin embargo, me gustan tan pequeñas y simples como sea posible, por lo que tal vez alguien se beneficie de ello. Usaría JavaScript Number()y una isNaNfuncionalidad como esta:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Espero que esto ayude.


1
¡Me encanta esto! Una solución tan elegante, sin expresiones regulares involucradas.
Levi Roberts

Esta no es una respuesta a la pregunta, OP solicitó solo permitir texto en una entrada, no verificar después.
Timberman

Sí, eso es verdad! Pero ya hay una respuesta aceptada que creo que es buena, pero pensé que esto podría ayudar a alguien, además de que es agradable y limpia.
Sicha

5

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

Usé el atributo onkeydown en lugar de onkeypress, porque el atributo onkeydown se verifica antes que el 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 puede controlar!

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. Para 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 teclas numéricas son solo 10 (0 - 9), pero si fueran 1 millón, no tendría sentido crear una matriz con todas estas teclas.

Códigos ASCII:

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

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

4

La mejor manera (permitir TODOS los tipos de números: negativo real, positivo real, negativo entero, 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();
    };
}); 

4

Esta es la versión extendida de la solución de geowa4 . Soportes miny maxatributos. 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, use 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'));
            }
    }); 
});

@UserB esto no debería eliminar nada.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.