keyCode для различных клавиатур
Доброго времени суток, уважаемые форумчане.
Как-то "нарисовал" маску ввода циферок для номера телефона. На компе работает, используя keyCode клавиатуры кнопок сверху и справа, если она есть. Например, для "0" верхний код 48, правый 96 и так для всех цифирей 0-9. Вопрос - а для всяких виртуальных клавиатур, часто используемых в мобильных браузерах, вероятно эти коды не "такие, а сякие". Вот как быть - проверять браузер и отключать маску, проверяя потом цифири, введённые пользователем, или есть какое-то универсальное решение? |
Тут можно узнать keyCode нажатой клавиши:
https://learn.javascript.ru/keyboard-events Воспользовавшись стендом и парой устройств (pc, mobile) можно узнать соответствуют ли коды клавиш или нет. Если нужно реализовать ввод символов только из предоставленного алфавита и обязательно до добавления символа в поле, то необязательно знать все коды клавиш. Из события можно получить код клавиши, по которому можно получить введенный символ. Дальше просто проверка на вхождение символа в алфавит. |
Напишите скрипт для отслеживания данных и эксперементируйте.
Вот что то типа такого можно:
<h3>Keydown</h3>
<div class="keydown"> </div>
<h3>Keypress</h3>
<div class="keypress"> </div>
<h3>Keyup</h3>
<div class="keyup"> </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 хорошее пособие с полезностями. Не нужно пренибригать её изучением. |
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... |
atanov, что мешает производить валидацию значения поля после того, как символ появится в поле?
|
Nexus,
ну да, это похоже единственный вариант, если не удаётся перехватывать, что печатает пользователь. Эх :cray: |
Цитата:
Вот примерчик, всё что не цифры - нафиг:
<input type="text">
<script>
let input = document.querySelector('input');
input.addEventListener('input', function () {
input.value = input.value.replace(/\D/, '');
})
</script>
|
Ещё проще - можно взять готовое решение.
Как пример:
<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. В ней сразу несколько масок. |
Цитата:
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 с событиями клавиатуры, событие input кросс-браузерное! https://caniuse.com/#feat=input-event Клавиатурные события, например, правильно использовать, когда делается управление приложения при помощи клавиатуры... нажатие стрелочек, горячие клавиши (например, типа ⌘S , ⌘⇧[ , ⌘+ , ⌥↑ , ⇧⌥↓ , ⌃⌥↓ , ⎋ и т. д.), |
Цитата:
\d - цифры \D - нецифры. Устаревшая документация или баг? Да, действительно ������ можно ввести. Пробую console.log(typeof ������); даёт ошибку синтаксиса. А тут вместо гавняшки кракозябы вылазят. |
Цитата:
/\d/ означает /[0-9]/ /\D/ означает /[\u0000-\u002f\u003a-\uffff]/, т. е. все кодовые точки в диапазоне с U+0000 по U+FFFF кроме тех, что находятся с U+0030 по U+0039. Поскольку 1️⃣ 2️⃣ 3️⃣ и т. д. технически состоят из числа(с U+0030 по U+0039), U+FE0F VARIATION SELECTOR-16 и U+20E3 COMBINING ENCLOSING KEYCAP, то /\D/ способен понизить «эмоциональность» чисел!
alert("0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣".replace(/\D/g, ""))
Поскольку кодовые точки начиная с U+10000 представлены как сурргатные пары /[\ud800-\ud8ff][\udc00-\udfff]/, то не-цифра находится так... /[\ud800-\ud8ff][\udc00-\udfff]|[\u0000-\u002f\u003a-\uffff]/ Ваш пример...
<input>
<script>
const input = document.querySelector("input");
input.addEventListener("input", () => {
input.value = input.value.replace(/[\ud800-\ud8ff][\udc00-\udfff]|[\u0000-\u002f\u003a-\uffff]/g, "");
})
</script>
Выражение /[\ud800-\ud8ff][\udc00-\udfff]|[\u0000-\u002f\u003a-\uffff]/ слишком запутанно, может это можно как-то упростить? Что-бы можно было написать примерно так /\D/. Как сказать-то... The "u" flag to the rescue! Флаг "u" понимает, что суррогатные пары нужно воспринимать как один символ! /\D/u Ваш пример...
<input>
<script>
const input = document.querySelector("input");
input.addEventListener("input", () => {
input.value = input.value.replace(/\D/gu, "");
})
</script>
Если вы хотите писать красивые и читаемые регулярные выражения и вы используете исключающие диапазоны, то вам всегда нужен флаг "u", если только вы не собираетесь вручную задавать диапазон суррогатных пар. Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Внимание всем! может кто-то описать 1.в чём проблема с эмодзи на форуме?
2. как это можно решить? |
рони, мб. проблема в кодировке бд?
|
Nexus,
я плохо разбираюсь в данной тематике, не могу даже прокомментировать твоё сообщение, есть желание довести лаконично до админа данную проблему, которую самостоятельно я даже не могу внятно описать. |
рони, без знания используемой кодировки бд сложно сказать в этом дело или нет.
Прочитайте "вступление" и раздел "Немного о кодировках и представлениях", это должно дать понимание того, о чем я пишу: https://codex.so/mysql-and-emoji |
Nexus,
Цитата:
|
Цитата:
Так как у меня проблемы с регулярками, я себе в тетрадку выписал разные правила для регулярок и поставил её возле монитора. Из флагов у меня было три: i, g, m. Добавил вчера u, но описания для него ещё не нашёл. |
рони, представление кодировки четырехбайтное?
Цитата:
|
Цитата:
|
Вот это я волну поднял :D
|
Nexus,
CHARSET=utf8 Спасибо за участие и помощь ... тема отложена до лучших времён или большей востребовательности ... |
Цитата:
|
Цитата:
|
laimas,
код ошибки сбрось сюда? |
Цитата:
Error 523 Ray ID: 4b9f60d8ffa64f20 • 2019-03-19 12:16:51 UTC Origin is unreachable You Browser Working -- Moscow Cloudflare Working -- lookatcode.com Host Error |
laimas,
браузер? |
Цитата:
|
laimas,
хост гонит Цитата:
|
Вся изюминка в том, что если код в песочнике, это alert(чего-то простое), то нет проблем. Но стоит поместить чуточку посложнее, и все. Вот на такое
https://javascript.ru/forum/misc/420...tml#post504967 уже ковыряет чего-то долго, после чего ошибка. Щелкаем опять "Посмотреть" и вуаля, все работает. |
рони,
починили? Теперь проблем не наблюдается. |
laimas,
само ... Цитата:
|
| Часовой пояс GMT +3, время: 11:27. |