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
fuente
Respuestas:
HTML 5
Puede usar el número de tipo de entrada HTML5 para restringir solo las entradas de número:
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:
Vea esta respuesta o pruébela usted mismo en JSFiddle .
Para fines generales, puede tener la validación JS de la siguiente manera:
Si desea permitir decimales, reemplace la "condición if" con esto:
Fuente: la entrada de texto HTML solo permite la entrada numérica
Demostración de JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/
fuente
var charCode = (evt.which) ? evt.which : evt.keyCode;
También puede usar el atributo de patrón en html5:
Tutorial de validación de entrada
Sin embargo, si su doctype no lo es
html
, creo que necesitará usar javascript / jquery.fuente
Código rápido y fácil
Esto permitirá el uso de números y retroceso solamente.
Si también necesita una parte decimal, use este fragmento de código
fuente
Por favor, intente este código junto con el campo de entrada en sí
Funcionará bien.
fuente
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:
fuente
y en el js:
o puede escribirlo de una manera complicada pero útil:
Nota : cross-browser y regex en literal.
fuente
0.43
o.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í .He usado expresiones regulares para reemplazar el valor de entrada con el patrón necesario.
fuente
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 con
type="number"
Para hacerlo aún más emocionante, también puede tener un límite:
¡Disfrutar!
fuente
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.
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í!
fuente
JSFiddle: https://jsfiddle.net/ug8pvysc/
fuente
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.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
fuente
¿Qué tal el uso
<input type="number"...>
?http://www.w3schools.com/tags/tag_input.asp
Además, aquí hay una pregunta que tiene algunos ejemplos del uso de Javascript para la validación .
Actualización: vinculada a una mejor pregunta (gracias alexblum).
fuente
si no es entero, establezca 0
fuente
La respuesta aceptada:
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:
Comentaría la publicación original, pero mi reputación es demasiado baja para hacerlo (acabo de crear esta cuenta).
fuente
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.
fuente
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:
Consulte también mi página "Campo entero:" del ejemplo del filtro de clave de entrada
fuente
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
fuente
Agregue dentro de su etiqueta de entrada: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"
fuente
Actualicé algunas respuestas publicadas para agregar lo siguiente:
Especifique cuántos números después del punto decimal está permitido.
fuente
Lo uso para códigos postales, rápido y fácil.
fuente
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>
fuente
http://www.texotela.co.uk/code/jquery/numeric/ créditos de entrada numérica a Leo Vũ por mencionar esto y, por supuesto, TexoTela. con una página de prueba
fuente
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]+">
fuente
Una forma podría ser tener una matriz de códigos de caracteres permitidos y luego usar la
Array.includes
función para ver si el carácter ingresado está permitido.Ejemplo:
fuente
¿Suficientemente simple?
fuente