Есть ли способ захвата букв в поле ввода type = "number"? - PullRequest
1 голос
/ 06 ноября 2019

У меня есть это поле ввода:

<input type="number" class="col-sm-12" id="scanner" autofocus>

прямо сейчас, вы можете отсканировать что-нибудь в него, и если отсканированные данные содержат что-либо кроме чисел, они удаляют их. Это для мобильного приложения Android WebView, и когда этот сканер имеет фокус, мы хотим показывать только цифровую клавиатуру, поэтому она имеет тип «цифра».

Кто-нибудь знает, как я могу захватить буквы, если дажехотя поле ввода имеет тип «число» без изменения его обратно на тип = «текст»?

Ответы [ 2 ]

2 голосов
/ 06 ноября 2019

Нет, атрибут numbers поля input удаляет значения, и из того, что я обнаружил, они не могут быть получены, поскольку к полю input применяется неявное regex.

Однако вы можете попытаться сделать свою собственную проверку и поймать буквы, если они имеют для вас значение.

Ниже описано, как этого добиться.

Во-первых, установите полеатрибут type обратно в text, то есть

<input type="text" placeholder="Enter Number"/>

Вы можете получить только буквы из строки, используя регулярное выражение:

/[^a-zA-Z]+/g

Вы можете получить только цифры из строки, используя регулярное выражение:

/\D/g

Применение события onkeyup для контроля ввода в поле:

onkeyup="validate(this)

Окончательное решение отслеживает событие onkeyup, удаляет буквы и позволяет толькоцифры остаются. Тем не менее, он ловит буквы в var для дальнейшего использования.

<script>
function validate(element) {
    var letters = element.value.replace(/[^a-zA-Z]+/g, '');
    var numbers = element.value.replace(/\D/g,'');
    element.value = numbers;
   
}
</script>
<input type="text" onkeyup="validate(this)" placeholder="Enter Number"/>

Также см. JSFiddle

РЕДАКТИРОВАТЬ:

Если вы этого не сделаетенапример, как буквы появляются, а затем сразу удаляются из ввода, вам необходимо отслеживать событие keydown и сопоставлять каждую букву / символ с их кодом ключа.

Реализация этого может быть найдена здесь: Как предотвратить ввод недопустимых символов в поля ввода

Полный список кодов ключей Javascript можно найти здесь: Коды символов Javascript (коды ключей)

0 голосов
/ 06 ноября 2019

Поля ввода типа number позволяют использовать букву e (представляющую экспоненту). Таким образом, вы сможете проверить свой метод, набрав букву е.

...