Pourquoi l'entrée html de type «nombre» permet-elle de saisir la lettre «e» dans le champ?


217

J'ai l'élément d'entrée html5 suivant:

<input type="number">

Pourquoi cette entrée permet-elle de saisir le caractère «e» dans le champ de saisie? Aucun autre caractère alphabétique ne peut être saisi (comme prévu)

Utilisation de Chrome v. 44.0.2403.107

Pour voir ce que je veux dire: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
Il vous permet également de saisir +, - et .plusieurs fois dans certains navigateurs.
nu everest

Réponses:


218

Parce que c'est exactement ainsi que la spécification indique que cela devrait fonctionner. L'entrée numérique peut accepter des nombres à virgule flottante , y compris des symboles négatifs et le caractère eou E(où l'exposant est le nombre après le eou E):

Un nombre à virgule flottante se compose des parties suivantes, exactement dans l'ordre suivant:

  1. Facultativement, le premier caractère peut être un caractère " -".
  2. Un ou plusieurs caractères de la plage " 0—9".
  3. Facultativement, les pièces suivantes, dans exactement l'ordre suivant:
    1. un caractère " ."
    2. un ou plusieurs caractères de la plage " 0—9"
  4. Facultativement, les pièces suivantes, dans exactement l'ordre suivant:
    1. un caractère " e" ou " E"
    2. éventuellement, un caractère " -" ou " +"
    3. Un ou plusieurs caractères de la plage " 0—9".

2
Ah merci. Je cherchais dans la mauvaise spécification
Gnarlywhale

4
Je suis toujours déconcerté par cela, tout d'abord je ne suis pas mathématicien, alors que signifie "e" dans le contexte d'un nombre? Deuxièmement, je ne comprends pas pourquoi input.value est une chaîne vide dès que vous y écrivez un "e", même s'il y a des chiffres et que le caractère est autorisé ...
Simon

9
@Simon, l'utilisation de la eest utile pour condenser de grands nombres qui seraient autrement fastidieux à taper. À titre d'exemple trivial,2e2 = 2*10^2 = 200
Gnarlywhale

3
@Simon "dès que j'écris e" , eh bien, oui "4e" n'est pas un nombre, tandis que par exemple "4e + 0" est un nombre valide (4). Si vous avez du code javascript côté client "en direct" fonctionnant avec des entrées utilisateur partielles, vous devez donner à l'utilisateur le temps de terminer sa modification d'entrée pour fournir la pleine valeur, et ne pas interférer à mi-chemin dans la modification. Si vous avez "non défini" à partir de l'entrée "4e + 0", corrigez votre analyseur "au numéro". L'exemple de la question fonctionne bien, signale "4e + 1" comme erreur et "4e + 0" est renvoyé correctement comme "4e + 0" (c'est-à-dire un nombre entre 1 et 5).
Ped7g

4
@Anthony Non, esignifie exposant.
Scott Marcus

62

Nous pouvons le rendre si simple comme ci-dessous

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

Réponse mise à jour

nous pouvons le rendre encore plus simple comme le suggère @ 88 MPG

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


17
Mieux vaut l'utiliser return event.keyCode !== 69car il évite un opérateur ternaire inutile. Je ne recommanderais pas non plus l'incrustation.
Adam Fratino

5
Cela n'empêche pas le copier-coller eou Esur le terrain
molamk

18

Le type de numéro d'entrée HTML autorise "e / E" car "e" signifie exponentiel qui est un symbole numérique.

L'exemple 200000 peut également être écrit comme 2e5. J'espère que cela aide à vous remercier pour la question.          


15

La meilleure façon de forcer l'utilisation d'un nombre composé uniquement de chiffres:

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

cela évite 'e', ​​'-', '+', '.' ... tous les caractères qui ne sont pas des chiffres!

Pour autoriser uniquement les touches numériques:

isNaN (Number (event.key))

mais acceptez "Backspace" (keyCode: 8) et "Delete" (keyCode: 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
Dans quelle mesure êtes-vous sûr que cela empêchera l'insertion d'un caractère «E» avec la fonctionnalité de copier-coller?
StephenKelzer

1
Juste vérifié, vous avez raison, cela ne fonctionne pas pour les entrées copiées et collées.
Gnarlywhale

Vous avez raison @StephenKelzer. J'ai ajouté du code pour gérer cela.
TruthSeeker

4

Pour masquer la lettre eet le signe moins, optez -simplement pour:

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

3

En utilisant angulaire, vous pouvez le faire pour restreindre la saisie 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
cela limitera l'utilisateur à entrer ce caractère ??
Amy

1
merci pour l'aide que je cherchais pour la même solution en angulaire mais maintenant j'ai une idée comment le faire, je vais créer une directive et terminer la tâche merci pour votre message
Amy

vous pouvez créer la directive qui est la meilleure pratique. vous pouvez aussi le faire directement dans le fichier .ts de votre composant!
rinku Choudhary

0

Angulaire; avec avertissement obsolète IDC keyCode

Fonctionnellement identique à la réponse de Rinku mais avec prévention des alertes 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);
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.