Чому введення html з типом "число" дозволяє ввести літеру "e" в поле?


217

У мене є такий елемент введення html5:

<input type="number">

Чому цей вхід дозволяє вводити символ "e" у поле введення? Жоден інший символ алфавіту неможливо ввести (як очікувалося)

Використання chrome v. 44.0.2403.107

Щоб побачити, що я маю на увазі: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
Це також дозволяє вводити +, - і .кілька разів у деяких браузерах.
nu everest

Відповіді:


217

Тому що саме так пише спецтехніка . Введення числа може приймати числа з плаваючою комою , включаючи негативні символи та символ eабо E(де показник - це число після eабо E):

Номер з плаваючою комою складається з наступних частин у точно наступному порядку:

  1. За бажанням, перший символ може бути -символом.
  2. Один або більше символів у діапазоні " 0—9".
  3. Необов'язково наступні частини в точно наступному порядку:
    1. " ." характер
    2. один або кілька символів у діапазоні " 0—9"
  4. Необов'язково наступні частини в точно наступному порядку:
    1. А « e» символ або « E» символ
    2. необов'язково -символ " +" або " "
    3. Один або більше символів у діапазоні " 0—9".


4
Мене все ще бентежить, насамперед я не математик, тож що означає "е" в контексті числа? По-друге, я не розумію, чому input.value - це порожній рядок, як тільки ви пишете в ньому "e", навіть якщо є цифри і символ дозволений ...
Simon

9
@Simon, використання цього eкорисного для конденсації великої кількості, яке б інакше було втомлено набирати. Як тривіальний приклад,2e2 = 2*10^2 = 200
Gnarlywhale

3
@Simon "як тільки я напишу e" , так, так "4e" - це не число, тоді як, наприклад, "4e + 0" є дійсним числом (4). Якщо у вас є якийсь "живий" код клієнта на JavaScript, який працює з частковим вводом користувача, ви повинні дати користувачеві час, щоб закінчити його редагування вводу, щоб забезпечити повне значення, а не втручатися на півдорозі в редагування. Якщо у вас є "невизначено" з входу "4e + 0", виправте аналізатор "до числа". Приклад із запитання працює добре, повідомляє "4e + 1" як помилку, а "4e + 0" повертається правильно як "4e + 0" (тобто число між 1 і 5).
Ped7g

4
@Anthony Ні, eозначає Експонент.
Скотт Маркус

62

Ми можемо зробити це таким простим, як нижче

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

Оновлений відповідь

ми можемо зробити це ще простішим, як пропонує @ 88 MPG

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


17
Краще використовувати, return event.keyCode !== 69оскільки це дозволяє уникнути зайвого потрійного оператора. Також не рекомендую вбудовувати.
Адам Фратино

5
Це не перешкоджає eE
скріпленню

18

Тип вхідного номера HTML дозволяє "e / E", оскільки "e" означає експоненцію, яка є числовим символом.

Приклад 200000 також можна записати як 2e5. Я сподіваюся, що це допоможе подякувати вам за запитання.          


15

Найкращий спосіб змусити використовувати число, що складається лише з цифр:

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

це дозволяє уникнути 'e', ​​'-', '+', '. ... всі символи, які не є цифрами!

Щоб дозволити лише цифрові клавіші:

isNaN (Номер (event.key))

але прийняти "Backspace" (keyCode: 8) та "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
Наскільки ви впевнені, що це не дозволить вставити символ "E" з функцією копіювання та вставки?
StephenKelzer

1
Щойно перевірено, ви праві, він не працює для копіювання та вставлених даних.
Gnarlywhale

Ви праві @StephenKelzer. Я додав код, щоб впоратися з цим.
TruthSeeker


3

Використовуючи кутовий, це можна обмежити введенням 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
це обмежить користувача вводити цей символ ??
Емі

1
дякую за допомогу, я шукав таке ж рішення в кутовому, але тепер у мене є ідея, як це зробити, я створю директиву і
Емі

ви можете створити директиву, яка є найкращою практикою. Ви також можете зробити це безпосередньо у .ts-файл вашого компонента!
rinku Choudhary

0

Кутовий; із застарілим попередженням IDE keyCode

Функціонально такий же, як відповідь rinku, але з попередженням попередження 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);
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.