Por que a entrada html com o tipo "número" permite que a letra 'e' seja inserida no campo?

216

Eu tenho o seguinte elemento de entrada html5:

<input type="number">

Por que essa entrada permite que o caractere 'e' seja inserido no campo de entrada? Nenhum outro caractere do alfabeto pode ser inserido (conforme o esperado)

Usando chrome v. 44.0.2403.107

Para ver o que quero dizer: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

Gnarlywhale
fonte
3
Também permite inserir +, - e .várias vezes em alguns navegadores.
nu everest

Respostas:

217

Porque é exatamente assim que a especificação diz que ele deve funcionar. A entrada de número pode aceitar números de ponto flutuante , incluindo símbolos negativos e o caractere eou E(onde o expoente é o número após o eou E):

Um número de ponto flutuante consiste nas seguintes partes, exatamente na seguinte ordem:

  1. Opcionalmente, o primeiro caractere pode ser " -" um caractere.
  2. Um ou mais caracteres no intervalo " 0—9".
  3. Opcionalmente, as seguintes partes, exatamente na seguinte ordem:
    1. um .caractere " "
    2. um ou mais caracteres no intervalo " 0—9"
  4. Opcionalmente, as seguintes partes, exatamente na seguinte ordem:
    1. um ecaractere " E" ou " "
    2. opcionalmente, um -caractere " +" ou " "
    3. Um ou mais caracteres no intervalo " 0—9".
j08691
fonte
2
Ah obrigada. Eu estava olhando na especificação errada
Gnarlywhale
4
Ainda estou confuso com isso, antes de tudo, não sou matemático, então o que "e" representa no contexto de um número? Segundo, eu não entendo por que input.value é uma string vazia assim que você escreve um "e" nela, mesmo que haja números e o caractere seja permitido ...
Simon
9
@ Simon, usar o eé útil para condensar grandes números que, de outra forma, seriam tediosos de digitar. Como um exemplo trivial,2e2 = 2*10^2 = 200
Gnarlywhale 21/07
3
@ Simon "assim que eu escrever e" , bem, sim "4e" não é um número, enquanto, por exemplo, "4e + 0" é um número válido (4). Se você tiver algum código javascript "ativo" do lado do cliente trabalhando com entrada parcial do usuário, precisará dar tempo ao usuário para concluir a edição da entrada para fornecer valor total e não interferir na edição. Se você tiver "undefined" da entrada "4e + 0", corrija seu analisador "to number". O exemplo da pergunta funciona bem, informa "4e + 1" como erro e "4e + 0" é retornado corretamente como "4e + 0" (ou seja, número entre 1 e 5).
precisa saber é
4
@ Anthony Não, esignifica expoente.
21418 Marc Scott Marcus
62

Podemos torná-lo tão simples como abaixo

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

Resposta atualizada

podemos torná-lo ainda mais simples, como sugere o @ 88 MPG

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

codegeek
fonte
17
Melhor usar return event.keyCode !== 69, pois evita um operador ternário desnecessário. Também não recomendaria inlining.
Adam Fratino
5
Isso não impede que copiar-colar eou Eno campo embora
molamk
18

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

O exemplo 200000 também pode ser escrito como 2e5. Espero que isso ajude, obrigado pela pergunta.          

Anon Cypher
fonte
12

A melhor maneira de forçar o uso de um número composto apenas por dígitos:

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

isso evita 'e', ​​'-', '+', '.' ... todos os caracteres que não são números!

Para permitir apenas teclas numéricas:

isNaN (Number (event.key))

mas aceite "Backspace" (keyCode: 8) e "Delete" (keyCode: 46) ...

A. Morel
fonte
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();
    }
};
TruthSeeker
fonte
2
Qual é a sua confiança de que isso impedirá a inserção de um caractere 'E' com a funcionalidade copiar e colar?
precisa
1
Apenas verificado, você está correto, ele não funciona para cópia e entrada colada.
Gnarlywhale
Você está correto @StephenKelzer. Eu adicionei código para lidar com isso.
TruthSeeker 22/07
4

Para ocultar a letra ee o sinal de menos, -basta:

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"
Austris Cirulnieks
fonte
3

Usando angular, você pode fazer isso para restringir a 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
fonte
2
isso restringirá o usuário a inserir esse caractere?
Amy
1
obrigado pela ajuda eu estava procurando a mesma solução em angular, mas agora eu tenho idéia de como fazê-lo, vou criar uma diretiva e concluir a tarefa obrigado pelo seu post.
Amy
você pode criar a diretiva que é uma prática recomendada. também você pode fazer diretamente no arquivo .ts do seu componente!
rinku Choudhary
0

Angular; com aviso reprovado IDE keyCode

Funcionalmente o mesmo que a resposta de rinku, mas com a prevenção de aviso de 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
fonte