Почему ввод HTML с типом «число» позволяет вводить букву «е» в поле?


217

У меня есть следующий элемент ввода html5:

<input type="number">

Почему этот ввод позволяет вводить символ 'e' в поле ввода? Никакой другой символ алфавита не может быть введен (как ожидалось)

Использование Chrome v. 44.0.2403.107

Чтобы понять, что я имею в виду: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
Он также позволяет вводить +, - и .несколько раз в некоторых браузерах.
Ню Эверест

Ответы:


218

Потому что именно в спецификации говорится, что это должно работать. Ввод числа может принимать числа с плавающей запятой , включая отрицательные символы и символ eили E(где экспонента - это число после eили E):

Число с плавающей запятой состоит из следующих частей, точно в следующем порядке:

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

2
Ах, спасибо. Я искал не ту спецификацию
Gnarlywhale

4
Я все еще озадачен этим, во-первых, я не математик, так что же означает «е» в контексте числа? Во-вторых, я не понимаю, почему input.value является пустой строкой, как только вы пишете «е» в ней, даже если есть цифры и символ разрешен ...
Симон

9
@Simon, использование функции eполезно для сжатия больших чисел, которые в противном случае было бы утомительно печатать. В качестве тривиального примера,2e2 = 2*10^2 = 200
Gnarlywhale

3
@ Симон "как только я напишу e" , да, "4e" - это не число, а, например, "4e + 0" - допустимое число (4). Если у вас есть некоторый «живой» код JavaScript на стороне клиента, работающий с частичным пользовательским вводом, вы должны дать пользователю время закончить редактирование ввода, чтобы обеспечить полную ценность, а не вмешиваться на полпути в редактирование. Если у вас есть «undefined» из «4e + 0» ввода, исправьте ваш парсер «to number». Пример из вопроса работает хорошо, сообщает «4e + 1» как ошибку, а «4e + 0» возвращается правильно как «4e + 0» (т. Е. Число от 1 до 5).
Ped7g

4
@ Энтони Нет, 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
Это не мешает копированию eили вставке Eв поле
molamk

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))" />

это позволяет избежать «е», «-», «+», «.» ... все символы, которые не являются числами!

Чтобы разрешить только цифровые клавиши:

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' с функциями копирования и вставки?
Стивен Кельцер

1
Только что проверил, вы правы, он не работает для копирования и вставки ввода.
рыжий кит

Вы правы @StephenKelzer. Я добавил код, чтобы справиться с этим.
Истинный Искатель

4

Чтобы скрыть букву eи знак минус, -просто перейдите по ссылке:

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

3

Используя angular, вы можете сделать это, чтобы ограничить ввод 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
спасибо за помощь, я искал такое же решение в angular, но теперь у меня есть идея, как это сделать, я создам директиву и
Эми

Вы можете создать директиву, которая является лучшей практикой. также вы можете сделать это прямо в файле .ts вашего компонента!
Ринку Чоудхари

0

Угловая; с IDE keyCode устарело предупреждение

Функционально так же, как ответ Ринку, но с предупреждением 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.