texto - validar contraseñas iguales html5

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

Question

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

¿Hay una forma ordenada de lograr esto?

Answer 1

¿Qué le parece usar <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).

Answer 2

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

Answer 3

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

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

Answer 4

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. Funciona para mí, 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 (acaba de crear esta cuenta).

Answer 5

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>

Answer 6

Luché con este por un tiempo. Muchas soluciones aquí y en otras partes parecían complicadas. Esta solución utiliza 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 comprobación de isNaN (). Para números positivos solamente, puede cambiar esos valores a 0 e incluso simplemente eliminar el mínimo = "1" de la etiqueta de entrada para permitir números negativos.

También esto funciona para múltiples cuadros (y podría ahorrarle algo de tiempo de carga sobre hacerlos individualmente por id), simplemente agregue la clase "validateNumber" donde 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 devuelva NaN :-). También W3 declara here que la versión global de NaN tecleará "cast" antes de verificar, lo que da algunas pruebas adicionales (Number.isNaN () no hace eso). ¡Cualquier valor enviado a un servidor / backend debería validarse allí!

Answer 7

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

Funcionará para el teclado numérico y la tecla numérica normal

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

Answer 8

Por favor, vea mi proyecto del filtro de valor entre exploradores del elemento de entrada de texto en su página web utilizando 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>

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

Answer 9

Pruebe 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.

Answer 10

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

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

Esto funcionará solo 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 soporte transparente en navegadores antiguos.

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

function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.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/

Answer 11

Puede usar la etiqueta <input> con attribute type = ''number''.

Por ejemplo, puede 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 debe aceptar este campo.

Answer 12

Puede usar un <input type="number" /> . Esto solo permitirá el ingreso de números a la casilla de entrada.

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

Tenga en cuenta que la etiqueta input type="number" solo se admite en los navegadores más nuevos.

Para Firefox, puedes validar la entrada usando javascript:

http://jsfiddle.net/VmtF5/

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

• Chrome 6+
• Firefox 29+
• Opera 10.1+
• Safari 5+
• Borde
• (Internet Explorer 10+)

Answer 13

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

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

http://www.pageresource.com/html5/input-validation-tutorial/

Aunque, si tu doctype no es html entonces creo que necesitarás usar javascript / jquery.

Answer 14

si puede usar HTML5, puede hacer <input type="number" /> Si no, tendrá que hacerlo a través de javascript como dijo que no se envió para hacerlo desde codebehind.

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

PD no ha probado el código, pero debería ser más o menos correcto si no verifica si hay errores tipográficos: D Quizás quiera agregar algunas cosas más, como qué hacer si la cadena es nula o está vacía, etc. También podría hacerlo más rápido: D

Answer 15

http://www.texotela.co.uk/code/jquery/numeric/ créditos de http://www.texotela.co.uk/code/jquery/numeric/ a Leo Vũ por mencionar esto y, por supuesto, TexoTela. con una página de prueba.

Answer 16

si no entero conjunto 0

<input type="text" id="min-value" />
$(''#min-value'').change(function ()
{
var checkvalue = $(''#min-value'').val();
if (checkvalue != parseInt(checkvalue))
$(''#min-value'').val(0);
});

Answer 17

function AllowOnlyNumbers(e) {
e = (e) ? e : window.event;
var key = null;
var charsKeys = [
97, // a Ctrl + a Select All
65, // A Ctrl + A Select All
99, // c Ctrl + c Copy
67, // C Ctrl + C Copy
118, // v Ctrl + v paste
86, // V Ctrl + V paste
115, // s Ctrl + s save
83, // S Ctrl + S save
112, // p Ctrl + p print
80 // P Ctrl + P print
];
var specialKeys = [
8, // backspace
9, // tab
27, // escape
13, // enter
35, // Home & shiftKey + #
36, // End & shiftKey + $
37, // left arrow & shiftKey + %
39, //right arrow & ''
46, // delete & .
45 //Ins & -
];
key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
//console.log("e.charCode: " + e.charCode + ", " + "e.which: " + e.which + ", " + "e.keyCode: " + e.keyCode);
//console.log(String.fromCharCode(key));
// check if pressed key is not number
if (key && key < 48 || key > 57) {
//Allow: Ctrl + char for action save, print, copy, ...etc
if ((e.ctrlKey && charsKeys.indexOf(key) != -1) ||
//Fix Issue: f1 : f12 Or Ctrl + f1 : f12, in Firefox browser
(navigator.userAgent.indexOf("Firefox") != -1 && ((e.ctrlKey && e.keyCode && e.keyCode > 0 && key >= 112 && key <= 123) || (e.keyCode && e.keyCode > 0 && key && key >= 112 && key <= 123)))) {
return true
}
// Allow: Special Keys
else if (specialKeys.indexOf(key) != -1) {
//Fix Issue: right arrow & Delete & ins in FireFox
if ((key == 39 || key == 45 || key == 46)) {
return (navigator.userAgent.indexOf("Firefox") != -1 && e.keyCode != undefined && e.keyCode > 0);
}
//DisAllow : "#" & "$" & "%"
else if (e.shiftKey && (key == 35 || key == 36 || key == 37)) {
return false;
}
else {
return true;
}
}
else {
return false;
}
}
else {
return true;
}
}

<h1>Integer Textbox</h1>
<input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />

Answer 18

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

onkeyup activa cuando se libera la clave.

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 exitante, también puede tener un límite:

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

¡Disfrutar!

Answer 19

<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 puedes escribirlo de una manera complicada y ú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.