¿Cómo hacer que la etiqueta de entrada HTML solo acepte valores numéricos?

143

Necesito asegurarme de que un determinado <input>campo solo tome números como valor. La entrada no es parte de un formulario. Por lo tanto, no se envía, por lo que validar durante el envío no es una opción. Quiero que el usuario no pueda escribir ningún carácter que no sean números.

¿Hay alguna forma ordenada de lograr esto?

html input numbers validating Chiel ten Brinke
fuente
stackoverflow.com/questions/469357/…
alexblum
2
Eche un vistazo a este [enlace] [1], que tiene suficiente información. [1]: stackoverflow.com/questions/469357/…
Maheshkumar
Este también puede ser útil: stackoverflow.com/questions/995183/…
Chiel ten Brinke el
El posible duplicado de la entrada de texto HTML solo permite la entrada numérica
emkey08

Respuestas:

282

HTML 5

Puede usar el número de tipo de entrada HTML5 para restringir solo las entradas de número:

<input type="number" name="someid" />

Esto solo funcionará en el navegador de quejas HTML5. Asegúrese de que el documento de su documento html sea:

<!DOCTYPE html>

Consulte también https://github.com/jonstipe/number-polyfill para obtener asistencia transparente en navegadores antiguos.

JavaScript

Actualización: hay una solución nueva y muy simple para esto:

Le permite usar 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 .

Para fines generales, puede tener la validación JS de la siguiente manera:

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

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

Si desea permitir decimales, reemplace la "condición if" con esto:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Fuente: la entrada de texto HTML solo permite la entrada numérica

Demostración de JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/

Patel viral
fuente
66
Sí, esto funciona para mí en Firefox y Chrome. Extraño que js sea necesario para algo tan simple.
Chiel ten Brinke
77
No funciona en Chrome 30. No tengo ningún problema para escribir letras en la entrada de "número" en el violín. Hmmm ...
Ben
2
¿Qué pasa si alguien quiere ingresar valores flotantes como 8.9?
syed shah
66
para una solución más robusta, ¡también considere copiar y pegar puede agregar letras a este ejemplo!
Neil
3
¡Uy! la primera línea debe cambiarse a:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.
33

También puede usar el atributo de patrón en html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Tutorial de validación de entrada

Sin embargo, si su doctype no lo es html, creo que necesitará usar javascript / jquery.

martincarlin87
fuente
3
Aunque firefox le da al cuadro de entrada un borde rojo cuando se escriben no números, tanto en firefox como en Chrome, puede escribir caracteres que no sean números en el cuadro de entrada.
Chiel ten Brinke
¿Qué tipo de documento está utilizando en su página?
martincarlin87 19/12/12
ok, tal vez no es compatible con las versiones de navegador que tienes No estoy 100% seguro, pero para ser honesto, usaría algunos js para validar también, no confiaría exclusivamente en html5 en este momento
martincarlin87
77
la propiedad le permite ingresar números pero no enviar el formulario.
Mi1
1
¡ENVÍE SOLAMENTE LA VALIDACIÓN!
Eric Hodonsky
16

Código rápido y fácil

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Esto permitirá el uso de números y retroceso solamente.

Si también necesita una parte decimal, use este fragmento de código

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
abhijithvijayan
fuente
13

Por favor, intente este código junto con el campo de entrada en sí

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

Funcionará bien.

subindas pm
fuente
¿Cómo eliminar el retroceso entonces?
6by3
7

Puedes usar un <input type="number" />. Esto solo permitirá ingresar números en el cuadro de entrada.

Ejemplo: http://jsfiddle.net/SPqY3/

Tenga en cuenta que la type="number"etiqueta de entrada solo es compatible con los navegadores más nuevos.

Para firefox, puede validar la entrada usando javascript:

http://jsfiddle.net/VmtF5/

Actualización 2018-03-12: la compatibilidad con el navegador es mucho mejor ahora, ya que es compatible con lo siguiente:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Borde
  • (Internet Explorer 10+)
starbeamrainbowlabs
fuente
1
Parece funcionar muy bien en Chrome, pero no en Firefox.
Chiel ten Brinke
Ah Esto se debe a que Firefox no admite input type = number. Alternativamente, puede usar JavaScript para validar la entrada a medida que el usuario ingresa el texto. Respuesta actualizada
starbeamrainbowlabs
El jscript en jsfiddle.net/VmtF5 tampoco funcionará. Incluso si 1 dígito está al comienzo del carácter, la validación falla. Pruébelo usted mismo en jsfiddle
Akshay
@aarn Funciona para mí (consulte i.imgur.com/AWdmEov.png ), ¿qué navegador está utilizando?
starbeamrainbowlabs
@starbeamrainbowlabs Estoy usando Firefox. Además, ingrese 6abc, no le mostrará el error
Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

y en el js:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

o puede escribirlo de una manera complicada pero útil:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

Nota : cross-browser y regex en literal.

Fredrick Gauss
fuente
¿Cómo agregaría la capacidad de poner entradas como .5 o .3?
usuario3591637
Luego, debe considerar el primer y segundo caracteres ( 0.43o .43) que podrían hacerse al verificar el valor de la entrada actual más la tecla presionada. Esto sería feo en el código de una línea, recomiendo usar una función para esto. Para probar entero o flotante, marque aquí .
Fredrick Gauss
1
no puede eliminar un número ingresado por error
Chris Sim
5

He usado expresiones regulares para reemplazar el valor de entrada con el patrón necesario.

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">
Expandir fragmento

Shaktish
fuente
1
Por eso me encanta la expresión regular. Gracias, hombre, realmente me salvaste el día
Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup se dispara cuando se suelta la tecla.

isNaN(parseFloat(value))? comprueba si el valor de entrada no es un número.

Si no es un número, el valor se establece en 1000. :Si es un número, el valor se establece en el valor.

nota: por alguna razón solo funciona contype="number"

Para hacerlo aún más emocionante, también puede tener un límite:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

¡Disfrutar!

usuario40521
fuente
4

Luché con este por un momento. Muchas soluciones aquí y en otros lugares parecían complicadas. Esta solución usa jQuery / javascript junto con HTML.

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

En mi caso, estaba rastreando pequeñas cantidades con un valor mínimo de 1, de ahí el min = "1" en la etiqueta de entrada y abc = 1 en la verificación isNaN (). Para números positivos solamente, puede cambiar esos valores a 0 e incluso simplemente eliminar min = "1" de la etiqueta de entrada para permitir números negativos.

Además, esto funciona para varios cuadros (y podría ahorrarle algo de tiempo de carga al hacerlos individualmente por id), solo agregue la clase "validateNumber" cuando sea necesario.

Explicación

parseInt () básicamente hace lo que necesita, excepto que devuelve NaN en lugar de algún valor entero. Con un simple if () puede establecer el valor "alternativo" que prefiera en todos los casos en que se devuelve NaN :-). También W3 indica aquí que la versión global de NaN escribirá cast antes de verificar, lo que proporciona algunas pruebas adicionales (Number.isNaN () no hace eso). ¡Todos los valores enviados a un servidor / backend aún deben validarse allí!

Isaias
fuente
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
Expandir fragmento

JSFiddle: https://jsfiddle.net/ug8pvysc/

Sameh Saeed
fuente
1
Cuando pega un valor que contiene texto, lo permite
Chris Sim
1
También permite caracteres especiales. Por ejemplo: á, ã, ê, ó, è, etc.
AlmostPitt
3

si puede usar HTML5, puede hacerlo. <input type="number" /> Si no, tendrá que hacerlo a través de javascript, ya que dijo que no se envía para hacerlo desde el código subyacente.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

PS no probó el código, pero debería ser más o menos correcto si no verifica los errores tipográficos: D Es posible que desee agregar algunas cosas más, como qué hacer si la cadena es nula o vacía, etc. También puede hacer esto más rápido: D

czioutas
fuente
2

si no es entero, establezca 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
websky
fuente
2

La respuesta aceptada:

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

Es bueno pero no perfecto. A mí me funciona, pero recibo una advertencia de que la declaración if se puede simplificar.

Entonces se ve así, que es mucho más bonito:

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

Comentaría la publicación original, pero mi reputación es demasiado baja para hacerlo (acabo de crear esta cuenta).

Chris H.
fuente
2

Puedes usar el <input> etiqueta con el tipo de atributo = 'número'.

Por ejemplo, puedes usar <input type='number' />

Este campo de entrada solo permite valores numéricos. También puede especificar el valor mínimo y el valor máximo que este campo debe aceptar.

Geeth Chadalawada
fuente
2

Vea mi proyecto del filtro de valor entre navegadores del elemento de entrada de texto en su página web usando el lenguaje JavaScript: Filtro de clave de entrada . Puede filtrar el valor como un número entero, un número flotante o escribir un filtro personalizado, como un filtro de número de teléfono. Vea un ejemplo de código de entrada un número entero:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>
Expandir fragmento

Consulte también mi página "Campo entero:" del ejemplo del filtro de clave de entrada

Andrej
fuente
2

Para fines generales, puede tener la validación JS de la siguiente manera:

Funcionará para el teclado numérico y las teclas numéricas normales 

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
YasirPoongadan
fuente
2

Agregue dentro de su etiqueta de entrada: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

Naveen Kumar
fuente
2
Bienvenido a SO! Desafortunadamente, esta es una pregunta de 5 años y medio que ya tiene una respuesta aceptada. Es posible que desee buscar preguntas sin respuestas aquí: stackoverflow.com/unanswered
AndroidNoobie
2

Actualicé algunas respuestas publicadas para agregar lo siguiente:

  • Agregar el método como método de extensión
  • Permitir que solo se ingrese un punto

  • Especifique cuántos números después del punto decimal está permitido.

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
Plexis Plexis
fuente
1

Lo uso para códigos postales, rápido y fácil.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
Justin Buser
fuente
1

Al usar este código, no puede usar el "Botón de retroceso" en Mozilla Firefox, solo puede usar el retroceso en Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "requerido>

Wendell Alvarez
fuente
0

Es mejor agregar "+" a la condición REGEX para aceptar varios dígitos (no solo un dígito):

<input type="text" name="your_field" pattern="[0-9]+">

Dashko Leonid
fuente
0

Una forma podría ser tener una matriz de códigos de caracteres permitidos y luego usar la Array.includesfunción para ver si el carácter ingresado está permitido.

Ejemplo:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
MA1
fuente
0

¿Suficientemente simple?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Expandir fragmento

Normajean
fuente