¿Existe una forma rápida de configurar una entrada de texto HTML (<input type=text />
) para que sólo permita pulsaciones numéricas (más '.')? Después de un mínimo, un valor numérico no permitió al principio como 0.0 permitido pero .0* no permitido
Nota: Esta es una respuesta actualizada. Los comentarios que aparecen a continuación se refieren a una versión antigua que jugaba con los códigos de las teclas.
Pruébalo tú mismo [en JSFiddle][1].
Puedes filtrar los valores de entrada de un texto <input>
con la siguiente función setInputFilter
(soporta Copiar+Pegar, Arrastrar+Soltar, atajos de teclado, operaciones del menú contextual, teclas no escribibles, la posición del caret, 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.oldValue = "";
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);
}
});
});
}
Ahora puede utilizar la función setInputFilter
para instalar un filtro de entrada:
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}
Aquí hay algunos ejemplos más de filtros de entrada que pueden ser útiles:
return /^-?\d*$/.test(value); // Integer
return /^\d*$/.test(value); // Integer >= 0
return /^\d*$/.test(value) && // Integer >= 0 and <= 500
(value === "" || parseInt(value) <= 500);
return /^-?\d*[.,]?\d*$/.test(value); // Float (accept both '.' and ',' as decimal separator)
return /^-?\d*[.,]?\d{0,2}$/.test(value); // Currency (i.e. at most two decimal places)
return /^[a-z]*$/i.test(value); // A-Z only
return /^[0-9a-f]*$/i.test(value); // Hexadecimal
Nota que todavía debe hacer la validación del lado del servidor!
También hay una versión jQuery de esto. Vea esta respuesta o inténtelo usted mismo [en JSFiddle][4].
HTML 5 tiene una solución nativa con <input type="number">
(ver la especificación), pero ten en cuenta que el soporte de los navegadores varía:
step
, min
y max
.e
y E
en el campo. Véase también esta pregunta.Pruebe usted mismo en w3schools.com.
2 soluciones:
Utilizar un validador de formularios (por ejemplo con el plugin de validación jQuery)
Hacer 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);"/>