Perché l'input html con il tipo "numero" consente di inserire la lettera "e" nel campo?


217

Ho il seguente elemento di input html5:

<input type="number">

Perché questo input consente di inserire il carattere 'e' nel campo di input? Nessun altro carattere alfabetico può essere inserito (come previsto)

Utilizzando Chrome v. 44.0.2403.107

Per vedere cosa intendo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
Consente inoltre di inserire +, - e .più volte in alcuni browser.
nu everest,

Risposte:


218

Perché è esattamente come dice la specifica che dovrebbe funzionare. L'input numerico può accettare numeri in virgola mobile , inclusi simboli negativi e il carattere eo E(dove l'esponente è il numero dopo il eo E):

Un numero a virgola mobile è composto dalle seguenti parti, esattamente nel seguente ordine:

  1. Facoltativamente, il primo carattere può essere un " -" carattere.
  2. Uno o più caratteri nell'intervallo " 0—9".
  3. Facoltativamente, le seguenti parti, esattamente nel seguente ordine:
    1. un .carattere " "
    2. uno o più caratteri nell'intervallo " 0—9"
  4. Facoltativamente, le seguenti parti, esattamente nel seguente ordine:
    1. un ecarattere " E" o " "
    2. facoltativamente, un -carattere " +" o " "
    3. Uno o più caratteri nell'intervallo " 0—9".

2
Ah grazie. Stavo guardando nella specifica sbagliata
Gnarlywhale,

4
Sono ancora sconcertato da questo, prima di tutto non sono un matematico, quindi cosa significa "e" nel contesto di un numero? Secondo, non capisco perché input.value è una stringa vuota non appena ci scrivi una "e", anche se ci sono numeri e il personaggio è permesso ...
Simon

9
@Simon, usare il eè utile per condensare grandi numeri che sarebbero altrimenti noiosi da scrivere. A titolo di esempio banale,2e2 = 2*10^2 = 200
Gnarlywhale,

3
@Simon "non appena scrivo e" , beh, sì "4e" non è un numero, mentre ad esempio "4e + 0" è un numero valido (4). Se disponi di un codice javascript "live" sul lato client che funziona con input utente parziale, devi concedere all'utente il tempo di completare la modifica dell'input per fornire il valore completo e non interferire a metà della modifica. Se hai "undefined" dall'input "4e + 0", correggi il tuo parser "to number". L'esempio della domanda funziona bene, riporta "4e + 1" come errore e "4e + 0" viene restituito correttamente come "4e + 0" (cioè numero compreso tra 1 e 5).
Ped7g,

4
@Anthony No, esta per Exponent.
Scott Marcus,

62

Possiamo renderlo così semplice come di seguito

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

Risposta aggiornata

possiamo renderlo ancora più semplice come suggerisce @ 88 MPG

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


17
Meglio usare return event.keyCode !== 69in quanto evita un inutile operatore ternario. Inoltre non consiglierei l'allineamento.
Adam Fratino,

5
Ciò non impedisce però il copia-incolla eo Esul campo
molamk,

18

Il tipo di numero di input HTML consente "e / E" perché "e" sta per esponenziale che è un simbolo numerico.

L'esempio 200000 può anche essere scritto come 2e5. Spero che questo ti aiuti a ringraziarti per la domanda.          


15

Il modo migliore per forzare l'uso di un numero composto solo da cifre:

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

questo evita 'e', ​​'-', '+', '.' ... tutti i personaggi che non sono numeri!

Per consentire solo i tasti numerici:

isNaN (Number (event.key))

ma accetta "Backspace" (keyCode: 8) e "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
Quanto sei sicuro che questo impedirà di inserire un carattere 'E' con la funzionalità copia e incolla?
StephenKelzer,

1
Appena selezionato, hai ragione, non funziona per la copia e l'input incollato.
Gnarlywhale,

Hai ragione @StephenKelzer. Ho aggiunto il codice per gestirlo.
TruthSeeker,

4

Per nascondere sia la lettera eche il segno meno -basta andare per:

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

3

Usando angolare, puoi fare ciò per limitare l'inserimento di 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
questo limiterà l'utente a inserire quel carattere ??
Amy,

1
grazie per l'aiuto cercavo la stessa soluzione in angolare ma ora ho idea di come farlo, creerò direttiva e completerò l'attività grazie per il tuo post
Amy,

puoi creare la direttiva che è la migliore pratica. inoltre puoi anche fare direttamente nel file .ts del tuo componente!
Rinku Choudhary,

0

Angolare; con IDE keyCode avviso obsoleto

Funzionalmente uguale alla risposta di Rinku ma con prevenzione degli avvertimenti 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);
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.