¿Por qué la entrada html con el tipo "número" permite ingresar la letra 'e' en el campo?


217

Tengo el siguiente elemento de entrada html5:

<input type="number">

¿Por qué esta entrada permite que se ingrese el carácter 'e' en el campo de entrada? No se puede ingresar ningún otro carácter del alfabeto (como se esperaba)

Usando Chrome v. 44.0.2403.107

Para ver a qué me refiero: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
También le permite ingresar +, - y .varias veces en algunos navegadores.
nu everest

Respuestas:


218

Porque así es exactamente como la especificación dice que debería funcionar. La entrada de número puede aceptar números de coma flotante , incluidos símbolos negativos y el carácter eo E(donde el exponente es el número después de eo E):

Un número de coma flotante consta de las siguientes partes, exactamente en el siguiente orden:

  1. Opcionalmente, el primer carácter puede ser un " -" carácter.
  2. Uno o más caracteres en el rango " 0—9".
  3. Opcionalmente, las siguientes partes, en exactamente el siguiente orden:
    1. un " ." personaje
    2. uno o más caracteres en el rango " 0—9"
  4. Opcionalmente, las siguientes partes, en exactamente el siguiente orden:
    1. un " e" personaje o " E" personaje
    2. opcionalmente, un " -" personaje o " +" personaje
    3. Uno o más caracteres en el rango " 0—9".

2
Ah gracias. Estaba buscando la especificación incorrecta
Gnarlywhale

44
Todavía estoy desconcertado por esto, antes que nada no soy matemático, entonces, ¿qué significa "e" en el contexto de un número? En segundo lugar yo no entiendo por qué input.value es una cadena vacía, tan pronto como se escribe una "e" en ella, a pesar de que hay un número y se deja que el personaje ...
Simon

9
@Simon, usar el ees útil para condensar grandes números que de otra manera serían tediosos de escribir. Como un ejemplo trivial,2e2 = 2*10^2 = 200
Gnarlywhale

3
@Simon "tan pronto como escriba e" , bueno, sí "4e" no es un número, mientras que "4e + 0" es un número válido (4). Si tiene algún código javascript "en vivo" del lado del cliente que funciona con una entrada parcial del usuario, debe darle tiempo al usuario para finalizar su edición de entrada para proporcionar un valor completo y no interferir en la mitad de la edición. Si tiene una entrada "indefinida" de "4e + 0", corrija su analizador "a número". El ejemplo de la pregunta funciona bien, informa "4e + 1" como error y "4e + 0" se devuelve correctamente como "4e + 0" (es decir, número entre 1 y 5).
Ped7g el

44
@ Anthony No, esignifica Exponente.
Scott Marcus

62

Podemos hacerlo tan simple como a continuación

<input type="number"  onkeydown="javascript: return event.keyCode == 69 ? false : true" />

Respuesta actualizada

podemos hacerlo aún más simple como @ 88 MPG sugiere

<input type="number" onkeydown="return event.keyCode !== 69" />


17
Mejor usar return event.keyCode !== 69ya que evita un operador ternario innecesario. Tampoco recomendaría en línea.
Adam Fratino

55
Esto no impide copiar y pegar eo Een el campo, aunque
molamk

18

El tipo de número de entrada HTML permite "e / E" porque "e" significa exponencial, que es un símbolo numérico.

El ejemplo 200000 también se puede escribir como 2e5. Espero que esto ayude, gracias por la pregunta.          


15

La mejor manera de forzar el uso de un número compuesto solo por dígitos:

<input type="number" onkeydown="javascript: return event.keyCode === 8 ||
event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

esto evita 'e', ​​'-', '+', '.' ... todos los personajes que no son números!

Para permitir solo las teclas numéricas:

isNaN (Number (event.key))

pero acepte "Retroceso" (código clave: 8) y "Eliminar" (código clave: 46) ...


11
<input type="number" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)"  >

function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;

    isNotWanted = (keyCode == 69 || keyCode == 101);
    return !isNotWanted;
};
function handlePaste (e) {
    var clipboardData, pastedData;

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();

    if(pastedData.indexOf('E')>-1) {
        //alert('found an E');
        e.stopPropagation();
        e.preventDefault();
    }
};

2
¿Qué tan seguro está de que esto evitará insertar un carácter 'E' con la funcionalidad de copiar y pegar?
StephenKelzer

1
Acabo de marcar, tienes razón, no funciona para la copia y la entrada pegada.
Gnarlywhale

Tienes razón @StephenKelzer. Agregué código para manejar eso.
TruthSeeker

4

Para ocultar tanto la letra ecomo el signo menos -solo ve por:

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"

3

Usando angular, puede hacer esto para restringir la entrada de e, +, -, E

 <input type="number"  (keypress)="numericOnly($event)"/>


  numericOnly(event): boolean { // restrict e,+,-,E characters in  input type number
    debugger
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode == 101 || charCode == 69 || charCode == 45 || charCode == 43) {
      return false;
    }
    return true;

  }

2
esto restringirá al usuario para ingresar ese carácter?
Amy

1
gracias por la ayuda que estaba buscando la misma solución en angular pero ahora tengo idea de cómo hacerlo, crearé una directiva y completaré la tarea gracias por tu publicación
Amy

puede crear la directiva que sea la mejor práctica. ¡también puedes hacerlo directamente en el archivo .ts de tu componente!
rinku Choudhary

0

Angular; con IDE keyCode advertencia en desuso

Funcionalmente igual que la respuesta de rinku pero con prevención de advertencia IDE

numericOnly(event): boolean {
    // noinspection JSDeprecatedSymbols
    const charCode = (event.which) ? event.which : event.key || event.keyCode;  // keyCode is deprecated but needed for some browsers
    return !(charCode === 101 || charCode === 69 || charCode === 45 || charCode === 43);
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.