keyCode для различных клавиатур

[atanov]

Доброго времени суток, уважаемые форумчане.

Как-то "нарисовал" маску ввода циферок для номера телефона. На компе работает, используя keyCode клавиатуры кнопок сверху и справа, если она есть. Например, для "0" верхний код 48, правый 96 и так для всех цифирей 0-9.

Вопрос - а для всяких виртуальных клавиатур, часто используемых в мобильных браузерах, вероятно эти коды не "такие, а сякие". Вот как быть - проверять браузер и отключать маску, проверяя потом цифири, введённые пользователем, или есть какое-то универсальное решение?

[Nexus]

Тут можно узнать keyCode нажатой клавиши:
https://learn.javascript.ru/keyboard-events

Воспользовавшись стендом и парой устройств (pc, mobile) можно узнать соответствуют ли коды клавиш или нет.

Если нужно реализовать ввод символов только из предоставленного алфавита и обязательно до добавления символа в поле, то необязательно знать все коды клавиш.
Из события можно получить код клавиши, по которому можно получить введенный символ.
Дальше просто проверка на вхождение символа в алфавит.

[MC-XOBAHCK]

Напишите скрипт для отслеживания данных и эксперементируйте.

Вот что то типа такого можно:

<h3>Keydown</h3>
<div class="keydown">&nbsp;</div>
<h3>Keypress</h3>
<div class="keypress">&nbsp;</div>
<h3>Keyup</h3>
<div class="keyup">&nbsp;</div>

<script>
    document.addEventListener('keydown', (e) => {
        document.querySelector('.keydown').textContent = 'Клавиша: ' + e.key + ', keyCode: ' + e.keyCode + ', charCode: ' + e.charCode + ', which: ' + e.which;
        console.dir(e);
    })
    document.addEventListener('keypress', (e) => {
        document.querySelector('.keypress').textContent = 'Клавиша: ' + e.key + ', keyCode: ' + e.keyCode + ', charCode: ' + e.charCode + ', which: ' + e.which;
        console.dir(e);
    })
    document.addEventListener('keyup', (e) => {
        document.querySelector('.keyup').textContent = 'Клавиша: ' + e.key + ', keyCode: ' + e.keyCode + ', charCode: ' + e.charCode + ', which: ' + e.which;
        console.dir(e);
    })
</script>

console.dir(e) - выводит в консоль доступные для события свойства.

https://learn.javascript.ru/keyboard-events хорошее пособие с полезностями. Не нужно пренибригать её изучением.

[atanov]

Nexus,
Эх, клава-то скорее всего виртуальная... Воспользуюсь Вашим советом, посмотрю, что за события на этой клаве.
MC-XOBAHCK,
Спасибо, но... Как и предыдущему гуру - клава виртуальная. Вот например, выдаёт на любую цифру:
Keydown: undentified, keyCode: 229, charCode: 0, which: 229
Keyup: undentified, keyCode: 229, charCode: 0, which: 229
Добавка:
Chrome 72.0.3626.121, Android 9 не работает.
В Safari, iPhone - работает!
Ещё добавка
Не, событие нормальное - keyUp, вот только keyCode и which 229 для всей клавы, исключая backspace и enter...

[Nexus]

atanov, что мешает производить валидацию значения поля после того, как символ появится в поле?

[atanov]

Nexus,
ну да, это похоже единственный вариант, если не удаётся перехватывать, что печатает пользователь. Эх

[MC-XOBAHCK]

Эх

Так тут нет ничего сложного. Повесьте слушатель события input на поле ввода и делайте со значением что вам нужно.

Вот примерчик, всё что не цифры - нафиг:

<input type="text">

<script>
    let input = document.querySelector('input');
    
    input.addEventListener('input', function () {
        input.value = input.value.replace(/\D/, '');
    })
</script>

[MC-XOBAHCK]

Ещё проще - можно взять готовое решение.

Как пример:

<label>Телефон:</label>
<input id="phone" type="text">

<script src="https://unpkg.com/imask"></script>

<script>
    var element = document.querySelector('#phone');

    var maskOptions = {
        mask: '+7(000)000-00-00',
        lazy: false
    }

    var mask = new IMask(element, maskOptions);
</script>

Вот доки на эту библиотечку: https://unmanner.github.io/imaskjs/guide.html. В ней сразу несколько масок.

[Malleys]

Вот примерчик, всё что не цифры - нафиг:

В ваш примерчик можно свободно вводить любые символы после вставки нескольких эмодзи...

atanov, вместо клавиатурных событии, которые привязаны только к клавиатуре используйте событие input, вам не нужны клавиатурные события, вы хотите отслеживать ввод пользователя, а он может быть произведён не только при помощи клавиатуры.

Вы ведь хотите именно исследовать какое значение ввёл пользователь, а не на какую клавишу нажал пользователь!

Пример, в котором выводится всё, что ввёл пользователь

<input id="field" placeholder="Начните вводить что-нибудь">
<output id="result">

<script>
document.getElementById("field").addEventListener("input", function(event) {
    var value = event.target.value;
    event.target.value = "";

    document.getElementById("result").textContent = "Вы ввели — «" + value + "»";
});
</script>

Еще примеры...

https://javascript.ru/forum/dom-wind...tml#post503210

https://javascript.ru/forum/misc/767...tml#post503434

UPD

Тут можно узнать keyCode нажатой клавиши

Авторы скриптов в основном не заинтересованы в том, на какую клавишу нажмёт пользователь их приложения, им скорей интересно, что ввёл пользователь!

В отличие от keyCode с событиями клавиатуры, событие input кросс-браузерное! https://caniuse.com/#feat=input-event

Клавиатурные события, например, правильно использовать, когда делается управление приложения при помощи клавиатуры... нажатие стрелочек, горячие клавиши (например, типа ⌘S , ⌘⇧[ , ⌘+ , ⌥↑ , ⇧⌥↓ , ⌃⌥↓ , ⎋ и т. д.),

[MC-XOBAHCK]

В ваш примерчик можно свободно вводить любые символы после вставки нескольких эмодзи...

То есть эмодзи это цифры? Я вот себе выписал по регуляркам:
\d - цифры
\D - нецифры.

Устаревшая документация или баг?

Да, действительно ������ можно ввести.
Пробую

console.log(typeof ������);

даёт ошибку синтаксиса. А тут вместо гавняшки кракозябы вылазят.