Как запретить ввод «e» и знаков «+-» в type="number"?

Question

[Ян Александров]

Подключаю Alpine.js как в доке:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>

И, в общем то, этого достаточно для дальнейшей работы.
Вот есть такое поле ввода:

<input type="number" x-data="{}" @input="if( $event.data === 'e' ) { $el.value = $el.value.replace('\[e]\i', '') }">

Ввожу числа, но затем, если ввести символ "e", поле полностью очищается. Странно, что перед проверкой условия, значение $el.value пустое только при вводе этого символа. И очистка поэтому собственно, и производится.

Как можно задать условие на чистом JS, чтобы не пропускать символ "e", а также плюс и минус? И чтобы работало без бага очистки.

Я так понимаю это особенности type="number"? Так как и без alpine, на JS очистка производится, вот пример: https://jsfiddle.net/kickerock/d2nLqcgh/2/

Comments

[Kovalsky]

https://stackoverflow.com/questions/39291997/how-t...

[Ян Александров]

Kovalsky, да, я видел это обсуждение. Проблема в том, что $event.preventDefault(); не срабатывает в alpine на событии input. Возможно, плохо искал...

Answer 1

[Ян Александров]

Вот вариант, но он не предусматривает ситуацию вставки через ctrl+v:

<input type="number" x-data="{}" @keydown="if( ['+','-','e'].includes( $event.key ) ) $event.preventDefault()">

Answer 2

[Stalker_RED]

Если проверять keypress или даже keydown - не нужно будет делать никаких замен и очисток, а можно будет просто сделать preventDefault и "отменить" само нажатие кнопки.

Но input все равно нужно проверять, т.к. могут вставить через ctrl+v.

И вообще, чем вам 'E' не нравится?
123e3 это 123000 (три нуля в конце)
1e10 это 1000000000000 (10 нулей)
Это вполне валидные числа и есть.

Comments

[G F]

Для пользователей же

Answer 3

[vreitech]

проблема с очисткой в этом:
$el.value = $el.value.replace('\[e]\i', '')
как вы думаете, чему равно $el.value.replace('\[e]\i', '') перед тем, как быть присвоенным в $el.value?

Comments

[Ян Александров]

Понятно, что пустое значение. Там в принципе перед присваиванием $el.value равен пустой строке. И это происходит только если символ "e" идёт после какого-либо значения