Почему ввод html с типом "число" позволяет вводить букву "е" в поле?

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

<input type="number">

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

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

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

16 ответов

Решение

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

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

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

Мы можем сделать это так просто, как показано ниже

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

Лучший способ принудительного использования числа, состоящего только из цифр:

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

это позволяет избежать "е", "-", "+", "."...

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

IsNaN(Количество (event.key))

но принять "Backspace" (keyCode: 8) и "Удалить" (keyCode: 46) ...

Тип вводимого числа HTML допускает "e/E", потому что "e" обозначает экспоненциальный, который является числовым символом.

Пример 200000 также можно записать как 2e5. Я надеюсь, что это помогает поблагодарить вас за вопрос.

<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();
    }
};

Простое решение для исключения всего, кроме целых чисел

         <input  
    type="number"
    min="1" 
    step="1"
    onkeypress="return event.keyCode === 8 || event.charCode >= 48 && event.charCode <= 57">

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

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

valueAsNumber может выполнить эту работу (доказательство копирования/вставки)

Используя 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;

  }

E обозначает показатель степени и используется для сокращения длинных чисел. Поскольку входные данные являются математическими, а показатели находятся в математике, чтобы сократить большие числа, поэтому существует E.

Отображается это так: 4e2

Вот ссылка, если вы хотите узнать больше:

https://www.cyberdefinitions.com/definitions/E.html

http://mathforum.org/library/drmath/view/57140.html#:%7E:text=The%20e%20stands%20for%20Exponent,multiplied%20by%2010%20sixteen%20times).

        <input type="number" onKeyDown={(e) =>["e", "E", "+", "-"].includes(e.key) && e.preventDefault()} >

если вы нажмете клавишу, и ее эквивалент на компьютерном языке равен 69, он не наберет ее

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

Угловой; с предупреждением об устаревании кода 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);
}

Самое простое решение - parseInt() .

      <input type="number" onkeyup="this.value = parseInt(this.value); this.paste(this.onkeyup);"/>

ParseInt() возвращает пустое значение (NaN) для E, e, +, - и всего, что не является числом.

Использование иkeydownкак вам удобно сpasteсобытие. Для меняonkeyupработает лучше всего. Это работает и с копипастом

Простое и стандартное решение: в Angular / Js / Ts вы можете использовать регулярное выражение для ограничения любой клавиши ввода.

HTML: <input type="text" name="input1" (keypress)="numericOnly($event)" />

TS:

          numericPattern = /^[0-9]*$/;
    numericOnly(event){
       return this.numericPattern.test(event.key);
    }

Другие вопросы по тегам