Валидация input.onkeydown

@Avazart · Регистрация: 10.12.2010

Студворк — интернет-сервис помощи студентам

Читаю https://learn.javascript.ru/keyboard-events

PHP/HTML
1
2
3
4
5
6
7
<script>
function checkPhoneKey(key) {
  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-';
}
</script>
 
<input onkeydown="return checkPhoneKey(event.key)" placeholder="Введите телефон" type="tel">

Как правильно навесить keydown из js что бы работала такая валидация?

@amr-now · 12.03.2020, 06:13

Здравствуйте.
Вы пару строчек не дочитали.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <input placeholder="Введите телефон" type="tel" id="tel">
    <script>
        document.getElementById("tel").onkeydown = tel_keydown;
 
        function tel_keydown(event) {
            console.dir(event); // Здесь тестируем, на какую кнопку нажали
            return checkPhoneKey(event.key);
        }
        function checkPhoneKey(key) {
            return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-' ||
                key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace';
        }
    </script>
</body>
</html>

Теперь стрелочки и удаление прекрасно работают.
…Впрочем, мы всё равно можем ввести в <input> что угодно с помощью правого клика мыши и пункта «Вставить» контекстного меню. Так что такой фильтр не обладает 100% надёжностью. Мы можем просто оставить всё как есть, потому что в большинстве случаев это работает.
Альтернатива – отслеживать событие input, оно генерируется после любых изменений в поле <input>, и мы можем проверять новое значение и подчёркивать/изменять его, если оно не подходит.

=====
С клавиатурными событиями в JavaScript тухло всё.
Разработчики языка хотели всё улучшить, но у них ничего не получилось.
Новые стандарты нежизнеспособные, и даже браузеры на новые стандарты не полностью переехали.
В нехромоногом MS Edge отсутствует event.code.

@Avazart · 12.03.2020, 11:57 **[ТС]**

Я то дочитал, но не могу понять почему через addEventListener не работает, я так понимаю через него игнорируется возвращаемое значение.

JavaScript
1
2
3
4
5
6
7
8
function checkPhoneKey(event) 
{
   return (event.key >= '0' && event.key <= '9') || 
          event.key == '+' || event.key == '-' ||
          event.key == '(' || event.key == ')' || 
          event.key == 'ArrowLeft' || event.key == 'ArrowRight' ||
          event.key == 'Delete' || event.key == 'Backspace';      
}

JavaScript
1
input_el.addEventListener('keydown',checkPhoneKey);

@amr-now · 12.03.2020, 15:16

Сообщение от Avazart

но не могу понять почему через addEventListener не работает, я так понимаю через него игнорируется возвращаемое значение.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <input placeholder="Введите телефон" type="tel" id="tel">
    <script>
        document.getElementById("tel").addEventListener("keydown", checkPhoneKey);
 
        function checkPhoneKey(event) {
            console.dir(event); // Здесь тестируем, на какую кнопку нажали
            let key = event.key;
            if (!((key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-' ||
                key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace'))
                event.preventDefault();
        }
    </script>
</body>
</html>

https://learn.javascript.ru/default-browser-action

Чтобы отменить действие браузера по умолчанию, используйте event.preventDefault() или return false.
Второй метод работает, только если обработчик назначен через on<событие>.

addEventListener() хорош, только если мы сознательно навешиваем на MulticastDelegate несколько обработчиков с возможностью дополнительного довешивания обработчиков потом.

Огульно направо и налево использовать addEventListener() наверно не имеет смысла.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .