javascript - validacion - Tipo de entrada HTML5=¿el valor numérico está vacío en Webkit si tiene espacios o caracteres no numéricos?

validar formulario javascript onclick

Question

Este es un comportamiento extraño para mí, pero en navegadores Webkit (Chrome / Safari, no Firefox) si incluyo un espacio en una cadena de números en un <input type=number> entonces el value de esa entrada está vacío.

Ver este JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/5/

Aquí está el código:

<input id=''withOutspace'' type=''number'' value=''123''>
<input id=''with_space'' type=''number'' value=''123 123''>
<button>click</button>

$(''button'').click(function(){ 
    alert("withOut:"+$(''#withOutspace'').val()+" |||| with:"+$(''#with_space'').val());
});

Si vas a http://jsfiddle.net/timrpeterson/CZZEX/5/ , verás que la entrada with_space está vacía. Pero si lo coloca en un número que tiene un espacio o cualquier carácter no numérico, la alerta dirá que la entrada está vacía.

Obviamente, esto es un desastre para la validación de formularios con números de tarjetas de crédito, etc. ¿Alguien tiene un truco para esto?

Answer 1

El truco es usar type="tel" lugar de type="number" .

Esto resuelve los 2 problemas principales:

1. Se levanta un teclado numérico en dispositivos móviles
2. Valida (y no está vacío) con números o no números como entrada.

Por favor, consulte este JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/6/

Answer 2

Está configurando un campo de entrada numérica para una cadena que no es un número. Qué esperabas que sucediera? El punto es que estos campos no permiten o aceptan entradas no numéricas. Están documented como que solo aceptan un valor de coma flotante .

No hay "pirateo" disponible o requerido; la solución es dejar de usar un campo de entrada de number para un valor que no es un número . Tarjetas de crédito, números de teléfono, etc. estas cosas no son números. Contienen dígitos como un subconjunto de los caracteres válidos, pero también contienen caracteres completamente no numéricos como espacios, guiones y paréntesis. Deben almacenarse y tratarse como cadenas regulares.

Use <input type="text"/> .

Answer 3

Mi hack para este problema incluye lo siguiente (yo uso los validadores jQuery):

    $(document).on(''keyup'', ''[type="number"]'', function () {
        if (this.validity.badInput) {
            $(this).attr(''data-badinput'', true);
        }
    });

Más tarde en el método de validador hago esto:

    $.validator.addMethod(''isInteger'', function (value, element, parameterValue) {
        if ($(element).attr(''data-badinput'')) {
            //We know nasty browser always clears incorrect input, so empty string will look OK next time
            $(element).removeAttr(''data-badinput'');
            return false;
        }
        return !value || /^-?/d+$/.test(value);
    });

Answer 4

Puedo sugerir dos maneras. 1. Prevenir los caracteres en la entrada

# updated to support more numerical characters related
$(window).keydown(function(e) {
  if($(''input[type=number]'').index($(e.target))!=-1) {
    if(
      ($.inArray(e.keyCode, [48,49,50,51,52,53,54,55,56,57,58,96,97,98,99,100,101,102,103,104,105,8,13,190,189]) == -1) // digits, digits in num pad, ''back'', ''enter'', ''.'', ''-''
      || (e.keyCode == 190 && $(e.target).val().indexOf(".") != -1) // not allow double dot ''.''
      || (e.keyCode == 190 && $(e.target).val().length == 0) // not allow dot ''.'' at the begining
    ) {
      e.preventDefault();
    }
  }
});

o 2. Cambiar el tipo de entrada en vuelo

$(''input[type=number]'').focus(function() {
    $(this).prop(''type'', ''text'');
});

esto permite poner lo que quieras y cambiar su tipo de nuevo onblur

$(this).blur(function() {
    $(this).prop(''type'', ''number'');
});

Pero todavía no puede almacenar valores no numéricos en la entrada con type = number , por lo que val() siempre le devolverá la cadena vacía si cumple con char o espacio.

Por lo tanto, al menos tiene que eliminar toda la basura con .replace(/[^/d]/g, '''') - eso significa "eliminar todos los números excepto" antes de cambiar el tipo de regreso

En mi ejemplo , muestro ambos métodos + valores de entrada claros.