¿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

Gnarlywhale
fuente
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".
j08691
fuente
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" />

codegeek
fuente
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.          

Anon Cypher
fuente
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) ...

A. Morel
fuente
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();
    }
};
Buscador de la verdad
fuente
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"
Austris Cirulnieks
fuente
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;

  }
rinku Choudhary
fuente
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);
}
Simon Legg
fuente