Почему ввод 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
персонаж:
Число с плавающей запятой состоит из следующих частей, точно в следующем порядке:
- Необязательно, первый символ может быть "
-
" персонаж.- Один или несколько символов в диапазоне
0—9
".- По желанию, следующие части, в точности в следующем порядке:
- а "
.
" персонаж- один или несколько символов в диапазоне
0—9
"- По желанию, следующие части, в точности в следующем порядке:
- а "
e
"персонаж или"E
" персонаж- при желании
-
"персонаж или"+
" персонаж- Один или несколько символов в диапазоне
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
Вот ссылка, если вы хотите узнать больше:
<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);
}