only - jquery validate decimal
jQuery: ¿cuál es la mejor manera de restringir la entrada de "número" para los cuadros de texto?(permitir puntos decimales) (30)
No es necesario el código largo para la restricción de entrada de números, solo pruebe este código.
También acepta validos int & float ambos valores.
Enfoque de Javascript
onload =function(){
var ele = document.querySelectorAll(''.number-only'')[0];
ele.onkeypress = function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
return false;
}
ele.onpaste = function(e){
e.preventDefault();
}
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
Enfoque jQuery
$(function(){
$(''.number-only'').keypress(function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
ACTUALIZAR
Las respuestas anteriores son para el caso de uso más común: validación de entradas como un número.
Pero a continuación se muestra el fragmento de código para casos de uso especiales
- Permitiendo números negativos
- Mostrando el golpe de teclado no válido antes de eliminarlo.
$(function(){
$(''.number-only'').keyup(function(e) {
if(this.value!=''-'')
while(isNaN(this.value))
this.value = this.value.split('''').reverse().join('''').replace(/[/D]/i,'''')
.split('''').reverse().join('''');
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
¿Cuál es la mejor manera de restringir el "número" - solo entrada para cuadros de texto?
Estoy buscando algo que permita decimales.
Veo muchos ejemplos. Pero todavía tienen que decidir cuál usar.
Actualización de Praveen Jeganathan
No más complementos, jQuery ha implementado su propio jQuery.isNumeric () agregado en v1.7. Consulte: https://stackoverflow.com/a/20186188/66767
/ * ¿esta es la versión de mi navegador cruzado de Cómo permitir solo números (0-9) en el cuadro de entrada HTML usando jQuery?
* /
$("#inputPrice").keydown(function(e){
var keyPressed;
if (!e) var e = window.event;
if (e.keyCode) keyPressed = e.keyCode;
else if (e.which) keyPressed = e.which;
var hasDecimalPoint = (($(this).val().split(''.'').length-1)>0);
if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
// Allow: Ctrl+A
(keyPressed == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(keyPressed >= 35 && keyPressed <= 39)) {
// let it happen, don''t do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
e.preventDefault();
}
}
});
A continuación es lo que utilizo para bloquear literalmente las pulsaciones de teclado. Esto solo permite números 0-9 y un punto decimal. Fácil de implementar, sin mucho código, y funciona a la perfección:
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
} else {
return true;
}
}
</script>
<input value="" onkeypress="return isNumberKey(event)">
Acabo de encontrar un plug-in aún mejor. Te da mucho más control. Digamos que tiene un campo DOB donde necesita que sea numérico pero que también acepte los caracteres "/" o "-".
Funciona muy bien
Compruébelo en http://itgroup.com.ph/alphanumeric/ .
Como una ligera mejora de esta sugerencia , puede usar el complemento de Validación con su number() , digits y métodos de range . Por ejemplo, lo siguiente garantiza que obtenga un número entero positivo entre 0 y 50:
$("#myform").validate({
rules: {
field: {
required: true,
number: true,
digits: true,
range : [0, 50]
}
}
});
Compruebe este código de búsqueda para el uso de la base de datos:
function numonly(root){
>>var reet = root.value;
var arr1 = reet.length;
var ruut = reet.charAt(arr1-1);
>>>if (reet.length > 0){
var regex = /[0-9]|/./;
if (!ruut.match(regex)){
var reet = reet.slice(0, -1);
$(root).val(reet);
>>>>}
}
}
//Then use the even handler onkeyup=''numonly(this)''
Creo que esta es una buena manera de resolver este problema y es extremadamente simple:
$(function() {
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
var regex = /^[0-9]+/.?[0-9]*$/;
if (this.value.length > 0 && !regex.test(this.value)) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
});
});
Ejemplo: JSFiddle
Escenarios cubiertos
La mayoría de las recomendaciones similares aquí fallan al menos una de estas o requieren una gran cantidad de código para cubrir todos estos escenarios.
- Solo permite 1 punto decimal.
- Permite el
home,end, y las teclas dearrow. - Permite
deleteybackspaceen cualquier índice. - Permite editar en cualquier índice (siempre que la entrada coincida con la expresión regular).
- Permite ctrl + v y shift + insert para una entrada válida (igual con un clic derecho + pegar).
- No parpadea el valor del texto porque no se utiliza el evento
keyup. - Restaura la selección después de la entrada no válida.
Escenarios fallidos
- Comenzar con
0.5y eliminar solo el cero no funcionará. Esto puede solucionarse cambiando la expresión regular a //^[0-9]*/.?[0-9]*$/y luego agregando un evento de desenfoque para anteponer un0cuando el cuadro de texto comienza con un punto decimal (si se desea) . Vea este escenario avanzado para tener una mejor idea de cómo solucionarlo.
Enchufar
Creé este sencillo plugin jquery para hacer esto más fácil:
$("input").limitRegex(/^[0-9]+/.?[0-9]*$/);
El complemento jquery.numeric tiene algunos errores que notifiqué al autor. Permite múltiples puntos decimales en Safari y Opera, y no puede escribir retroceso, teclas de flecha o varios otros caracteres de control en Opera. Necesitaba una entrada de enteros positiva, así que al final acabé escribiendo mi propia cuenta.
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don''t support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn''t support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don''t raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
El complemento numérico () mencionado anteriormente, no funciona en Opera (no puede retroceder, eliminar o incluso usar las teclas de retroceso o avance).
El código a continuación, tanto en JQuery como en Javascript, funcionará perfectamente (y solo son dos líneas).
JQuery:
$(document).ready(function() {
$(''.key-numeric'').keypress(function(e) {
var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
if (verified) {e.preventDefault();}
});
});
Javascript:
function isNumeric(e)
{
var keynum = (!window.event) ? e.which : e.keyCode;
return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}
Por supuesto, esto es solo para la entrada numérica pura (más las teclas de retroceso, eliminación, avance / retroceso), pero se puede cambiar fácilmente para incluir puntos y menos caracteres.
Encontró una gran solución aquí http://ajax911.com/numbers-numeric-field-jquery/
Acabo de cambiar "keyup" a "keydown" según mis requisitos
Esta función hace lo mismo, usa algunas de las ideas anteriores.
$field.keyup(function(){
var val = $j(this).val();
if(isNaN(val)){
val = val.replace(/[^0-9/.]/g,'''');
if(val.split(''.'').length>2) val =val.replace(//.+$/,"");
}
$j(this).val(val);
});
- Mostrar comentarios visuales (aparece una letra incorrecta antes de desaparecer)
- permite decimales
- atrapa múltiples "."
- no tiene problemas con la izquierda / derecha del etc.
Este es un fragmento que acabo de hacer (usando una parte del código de Peter Mortensen / Keith Bentrup) para una validación de porcentaje entero en un campo de texto (se requiere jQuery):
/* This validates that the value of the text box corresponds
* to a percentage expressed as an integer between 1 and 100,
* otherwise adjust the text box value for this condition is met. */
$("[id*=''percent_textfield'']").keyup(function(e){
if (!isNaN(parseInt(this.value,10))) {
this.value = parseInt(this.value);
} else {
this.value = 0;
}
this.value = this.value.replace(/[^0-9]/g, '''');
if (parseInt(this.value,10) > 100) {
this.value = 100;
return;
}
});
Este codigo
- Permite utilizar las teclas numéricas principales y el teclado numérico.
- Valida para excluir los caracteres Shift-numeric (por ejemplo, #, $,%, etc.)
- Reemplaza los valores de NaN por 0
- Sustituye por 100 valores superiores a 100.
Espero que esto ayude a los necesitados.
Esto es muy simple, ya tenemos una función javascript incorporada "isNaN".
$("#numeric").keydown(function(e){
if (isNaN(String.fromCharCode(e.which))){
return false;
}
});
Gracias por el post Dave Aaron Smith
Edité su respuesta para aceptar decimales y números de la sección de números. Este trabajo perfecto para mí.
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
// We don''t support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
// IE doesn''t support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don''t raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section
(48 == event.which && $(this).attr("value")) || // No 0 first digit
(96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
HTML5 es compatible con el número de tipo de entrada con el navegador global 88% + según CanIUse en octubre de 2015.
<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />
Esta no es una solución relacionada con JQuery, pero la ventaja es que en los teléfonos móviles, el teclado Android se optimizará para ingresar números.
Alternativamente, es posible usar texto de tipo de entrada con el nuevo parámetro "patrón". Más detalles en la especificación HTML5.
Creo que es mejor que una solución jQuery, ya que en esta pregunta, la solución jQuery no admite el separador de miles. Si puedes usar html5.
JSFiddle: https://jsfiddle.net/p1ue8qxj/
La mejor manera es verificar los aspectos del cuadro de texto siempre que pierda el foco.
Puede verificar si el contenido es un "número" usando una expresión regular.
O puede usar el complemento de validación, que básicamente lo hace automáticamente.
No más complementos, jQuery ha implementado su propio jQuery.isNumeric() agregado en v1.7.
jQuery.isNumeric( value )Determina si su argumento es un número.
Resultados de las muestras
$.isNumeric( "-10" ); // true
$.isNumeric( 16 ); // true
$.isNumeric( 0xFF ); // true
$.isNumeric( "0xFF" ); // true
$.isNumeric( "8e5" ); // true (exponential notation string)
$.isNumeric( 3.1415 ); // true
$.isNumeric( +10 ); // true
$.isNumeric( 0144 ); // true (octal integer literal)
$.isNumeric( "" ); // false
$.isNumeric({}); // false (empty object)
$.isNumeric( NaN ); // false
$.isNumeric( null ); // false
$.isNumeric( true ); // false
$.isNumeric( Infinity ); // false
$.isNumeric( undefined ); // false
Aquí hay un ejemplo de cómo vincular el isNumeric () con el detector de eventos
$(document).on(''keyup'', ''.numeric-only'', function(event) {
var v = this.value;
if($.isNumeric(v) === false) {
//chop off the last char entered
this.value = this.value.slice(0,-1);
}
});
No ves alfabetos aparición mágica y desaparición en la tecla hacia abajo. Esto funciona en la pasta del ratón también.
$(''#txtInt'').bind(''input propertychange'', function () {
$(this).val($(this).val().replace(/[^0-9]/g, ''''));
});
Otra forma de mantener la posición del cursor en la entrada:
$(document).ready(function() {
$(''.numbersOnly'').on(''input'', function() {
var position = this.selectionStart - 1;
fixed = this.value.replace(/[^0-9/.]/g, ''''); //remove all but number and .
if(fixed.charAt(0) === ''.'') //can''t start with .
fixed = fixed.slice(1);
var pos = fixed.indexOf(".") + 1;
if(pos >= 0)
fixed = fixed.substr(0,pos) + fixed.slice(pos).replace(''.'', ''''); //avoid more than one .
if (this.value !== fixed) {
this.value = fixed;
this.selectionStart = position;
this.selectionEnd = position;
}
});
});
Ventajas:
- El usuario puede utilizar las teclas de flecha, Retroceso, Eliminar, ...
- Funciona cuando quieres pegar números
Plunker: Demo trabajando
Pensé que la mejor respuesta era la de arriba para simplemente hacer esto.
jQuery(''.numbersOnly'').keyup(function () {
this.value = this.value.replace(/[^0-9/.]/g,'''');
});
pero estoy de acuerdo en que es un poco molesto que las teclas de flecha y el botón de borrado presionen el cursor hasta el final de la cadena (y debido a eso me lo devolvieron en las pruebas)
Añadí en un simple cambio.
$(''.numbersOnly'').keyup(function () {
if (this.value != this.value.replace(/[^0-9/.]/g, '''')) {
this.value = this.value.replace(/[^0-9/.]/g, '''');
}
});
de esta manera, si hay un golpe de botón que no va a hacer que se cambie el texto, simplemente ignórelo. Con esto puedes presionar flechas y eliminar sin saltar hasta el final, pero borra cualquier texto no numérico.
Primero intenté resolver esto utilizando jQuery, pero no estaba contento con que los caracteres no deseados (sin dígitos) aparecieran en el campo de entrada justo antes de ser eliminados en el teclado.
Buscando otras soluciones encontré esto:
Enteros (no negativos)
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0 ||
//d/.test(String.fromCharCode(oKeyEvent.charCode));
}
</script>
<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput"
onkeypress="return numbersOnly(this, event);"
onpaste="return false;" /></p>
</form>
Fuente: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Live ejemplo: http://jsfiddle.net/u8sZq/
Puntos decimales (no negativos)
Para permitir un solo punto decimal, podrías hacer algo como esto:
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
var s = String.fromCharCode(oKeyEvent.charCode);
var containsDecimalPoint = //./.test(oToCheckField.value);
return oKeyEvent.charCode === 0 || //d/.test(s) ||
//./.test(s) && !containsDecimalPoint;
}
</script>
Fuente: Acabo de escribir esto. Parece estar trabajando. Ejemplo en vivo: http://jsfiddle.net/tjBsF/
Otras personalizaciones
- Para permitir que se escriban más símbolos, simplemente agréguelos a la expresión regular que actúa como filtro de código de caracteres básico.
- Para implementar restricciones contextuales simples, observe el contenido actual (estado) del campo de entrada (oToCheckField.value)
Algunas cosas que te podrían interesar:
- Solo se permite un punto decimal
- Permitir el signo menos solo si se coloca al comienzo de la cadena. Esto permitiría números negativos.
Deficiencias
- La posición del cursor no está disponible dentro de la función. Esto redujo enormemente las restricciones contextuales que puede implementar (por ejemplo, no hay dos símbolos consecutivos iguales). No estoy seguro de cuál es la mejor manera de acceder.
Sé que el título pide soluciones jQuery, pero espero que alguien lo encuentre útil de todos modos.
Puede utilizar el complemento de validación con su método number() .
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
Puedes usar autoNumeric desde decorplanit.com . Tienen un buen soporte para numérico, así como para moneda, redondeo, etc.
Lo he usado en un entorno IE6, con pocos ajustes de css, y fue un éxito razonable.
Por ejemplo, podría definirse una clase css numericInput , y podría usarse para decorar sus campos con las máscaras de entrada numérica.
Adaptado del sitio web autoNumérico:
$(''input.numericInput'').autoNumeric({aSep: ''.'', aDec: '',''}); // very flexible!
Si desea restringir la entrada (a diferencia de la validación), podría trabajar con los eventos clave. algo como esto:
<input type="text" class="numbersOnly" value="" />
Y:
jQuery(''.numbersOnly'').keyup(function () {
this.value = this.value.replace(/[^0-9/.]/g,'''');
});
Esto le permite al usuario saber inmediatamente que no pueden ingresar caracteres alfa, etc. en lugar de más tarde durante la fase de validación.
Seguirá queriendo validar porque la entrada se puede completar cortando y pegando con el mouse o posiblemente con un autocompletador de formularios que puede no activar los eventos clave.
Si está utilizando HTML5, no necesita hacer grandes esfuerzos para realizar la validación. Solo usa -
<input type="number" step="any" />
El atributo de paso permite que el punto decimal sea válido.
Simplemente ejecute el contenido a través de parseFloat (). Se devolverá NaN en la entrada no válida.
Utilicé esto, con buenos resultados ..
ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
var charcode = (e.which) ? e.which : e.keyCode;
// for decimal point
if(!(charcode===190 || charcode===110))
{ // for numeric keys andcontrol keys
if (!((charcode>=33 && charcode<=57) ||
// for numpad numeric keys
(charcode>=96 && charcode<=105)
// for backspace
|| charcode==8))
{
alert("Sorry! Only numeric values allowed.");
$("#id").val(ini);
}
// to include decimal point if first one has been deleted.
if(charcode===8)
{
ini=ini.split("").reverse();
if(ini[0]==".")
a=0;
}
}
else
{
if(a==1)
{
alert("Sorry! Second decimal point not allowed.");
$("#id").val(ini);
}
a=1;
}
ini=$("#id").val();
});
find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
He implementado exitosamente muchas formas con jquery.numeric plugin.
$(document).ready(function(){
$(".numeric").numeric();
});
Por otra parte esto también funciona con textareas!
EDITAR: - Con un soporte más amplio para los nuevos estándares de HTML, podemos usar el atributo de pattern y el tipo de number para input elementos de input para restringir la entrada de solo números. También funciona para restringir el pegado de contenido no numérico. Más información sobre number y otros tipos de entradas más recientes está disponible here .
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don''t support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn''t support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don''t raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
Este código funcionó bastante bien en mí, solo tuve que agregar el 46 en la matriz controlKeys para usar el período, aunque no creo que sea la mejor manera de hacerlo;)
window.jQuery.fn.ForceNumericOnly =
function () {
return this.each(function () {
$(this).keydown(function (event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don''t do anything
return;
} else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
});
};
Y aplícalo en todas las entradas que quieras:
$(''selector'').ForceNumericOnly();