Dlaczego wprowadzenie HTML typu „liczba” pozwala na wprowadzenie litery „e” w polu?

217

Mam następujący element wejściowy HTML5:

<input type="number">

Dlaczego to wejście pozwala na wpisanie znaku „e” w polu wprowadzania? Nie można wprowadzić innego znaku alfabetu (zgodnie z oczekiwaniami)

Korzystanie z chrome v. 44.0.2403.107

Aby zobaczyć, co mam na myśli: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

Gnarlywhale
źródło
3
Umożliwia także wprowadzanie +, - i .wiele razy w niektórych przeglądarkach.
czwartek

Odpowiedzi:

217

Ponieważ dokładnie tak mówi specyfikacja , że powinna działać. Wprowadzane liczby mogą przyjmować liczby zmiennoprzecinkowe , w tym symbole ujemne i znak elub E(gdzie wykładnikiem jest liczba po znaku elub E):

Liczba zmiennoprzecinkowa składa się z następujących części, dokładnie w następującej kolejności:

  1. Opcjonalnie pierwszy znak może być znakiem „ -”.
  2. Co najmniej jeden znak z zakresu „ 0—9”.
  3. Opcjonalnie następujące części w dokładnie następującej kolejności:
    1. znak „ .
    2. jeden lub więcej znaków z zakresu „ 0—9
  4. Opcjonalnie następujące części w dokładnie następującej kolejności:
    1. znak „ e” lub „ E
    2. opcjonalnie znak „ -” lub „ +
    3. Co najmniej jeden znak z zakresu „ 0—9”.
j08691
źródło
2
Ach, dzięki.
Patrzyłem
4
Nadal jestem tym zaskoczony, przede wszystkim nie jestem matematykiem, więc co oznacza „e” w kontekście liczby? Po drugie, nie rozumiem, dlaczego input.value jest pustym ciągiem, gdy tylko wpiszesz w nim „e”, mimo że są liczby i znak jest dozwolony ...
Simon
9
@ Simon, użycie ejest przydatne do zagęszczania dużych liczb, które w innym przypadku byłyby uciążliwe do wpisania . Jako trywialny przykład:2e2 = 2*10^2 = 200
Gnarlywhale
3
@ Simon „jak tylko napiszę e” , cóż, tak „4e” nie jest liczbą, podczas gdy na przykład „4e + 0” jest poprawną liczbą (4). Jeśli masz „żywy” kod javascript po stronie klienta działający z częściowym wprowadzaniem danych przez użytkownika, musisz dać użytkownikowi czas na zakończenie edycji danych wejściowych w celu zapewnienia pełnej wartości i nie przeszkadzać w połowie edycji. Jeśli masz „niezdefiniowany” z wejścia „4e + 0”, napraw parser „na liczbę”. Przykład z pytania działa dobrze, zgłasza „4e + 1” jako błąd, a „4e + 0” jest zwracane poprawnie jako „4e + 0” (tzn. Liczba między 1 a 5).
Ped7g
4
@Anthony Nie, eoznacza wykładnik potęgi.
Scott Marcus,
62

Możemy to uczynić tak prostym, jak poniżej

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

Zaktualizowana odpowiedź

możemy uczynić to jeszcze prostszym, jak sugeruje @ 88 MPG

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

codegeek
źródło
17
Lepszy w użyciu, return event.keyCode !== 69ponieważ pozwala uniknąć niepotrzebnego operatora trójskładnikowego. Nie polecałbym również wkładania.
Adam Fratino
5
To nie przeszkadza kopiowaniem wklejanie elub Ew polu chociaż
molamk
18

Typ liczbowy wejściowy HTML pozwala na „e / E”, ponieważ „e” oznacza wykładniczy, który jest symbolem numerycznym.

Przykład 200000 można również zapisać jako 2e5. Mam nadzieję, że to pomoże ci podziękować za pytanie.          

Anon Cypher
źródło
15

Najlepszy sposób, aby wymusić użycie tylko liczby złożonej z cyfr:

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

pozwala to uniknąć „e”, „-”, „+”, „.” ... wszystkie znaki, które nie są liczbami!

Aby zezwolić tylko na klawisze numeryczne:

isNaN (Number (event.key))

ale zaakceptuj „Backspace” (keyCode: 8) i „Delete” (keyCode: 46) ...

A. Morel
źródło
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();
    }
};
Poszukiwacz prawdy
źródło
2
Czy jesteś pewien, że zapobiegnie to wstawieniu znaku „E” z funkcją kopiowania i wklejania?
StephenKelzer
1
Właśnie zaznaczone, masz rację, nie działa w przypadku kopiowania i wklejania danych wejściowych.
Gnarlywhale
Masz rację @StephenKelzer. Dodałem kod, aby sobie z tym poradzić.
TruthSeeker
4

Aby ukryć zarówno literę, jak ei znak minus, -wystarczy:

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"
Austris Cirulnieks
źródło
3

Używając kątowego, możesz to zrobić, aby ograniczyć się do wprowadzania 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
źródło
2
ograniczy to użytkownika do wprowadzenia tego znaku?
Amy
1
dzięki za pomoc, której szukałem tego samego rozwiązania kątowego, ale teraz mam pomysł, jak to zrobić, utworzę dyrektywę i ukończę zadanie dzięki za twój post
Amy
możesz stworzyć dyrektywę, która będzie najlepszą praktyką. równie dobrze możesz to zrobić bezpośrednio w pliku .ts swojego komponentu!
rinku Choudhary
0

Kątowy; z przestarzałym ostrzeżeniem IDE keyCode

Funkcjonalnie taki sam jak odpowiedź rinku, ale z zapobieganiem ostrzeżeniom 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
źródło