Эта статья поможет вам обнаружить клавишу табуляции в JavaScript.
Как обнаружить клавишу Tab в JavaScript?
Чтобы обнаружить клавишу табуляции в JavaScript, примените следующие методы:
- “ селектор запросов() Метод
- “ получитьэлемент по идентификатору() Метод
Указанные подходы будут продемонстрированы один за другим!
Метод 1: Обнаружение клавиши Tab в JavaScript с использованием метода document.querySelector()
“ документ.querySelector() » обращается к первому элементу, соответствующему селектору CSS, а затем метод addEventListener() добавляет обработчик события к элементу, к которому осуществляется доступ. Эти методы можно применять для доступа к типу ввода и определения того, нажата ли клавиша табуляции при вводе ее значения.
Синтаксис
элемент. addEventListener ( мероприятие , функция , использованиеCapture )
В данном синтаксисе « мероприятие ” относится к названию события, “ функция » — это конкретная функция, которая должна выполняться при возникновении события, а « использованиеCapture ” — необязательный аргумент.
документ. селектор запросов ( Селекторы CSS )В приведенном выше синтаксисе « Селекторы CSS ” относятся к одному или нескольким селекторам CSS, которые можно указать в методе document.querySelector().
Просмотрите следующий пример, чтобы лучше понять изложенную концепцию.
Пример
Во-первых, укажите тип ввода как « текст » с начальным значением заполнителя и заголовком в « <ч> ' ярлык:
< h2 > Результат < / h2 >
Далее примените « документ.querySelector() » для доступа к указанному вводу и заголовку соответственно и сохранить их в переменных с именем « вход ' а также ' результат ”:
пусть ввод знак равно документ. селектор запросов ( 'вход' ) ;пусть результат знак равно документ. селектор запросов ( 'ч2' ) ;
Теперь добавьте « нажатие клавиши ” с полем ввода с помощью метода addEventListener(). Это событие будет уведомлять пользователя всякий раз, когда « вкладка в поле ввода нажимается клавиша », применяя следующее условие с помощью кнопки « внутренний текст ' имущество:
вход. addEventListener ( 'нажатие клавиши' , ( а также ) => {если ( а также. ключ === 'Вкладка' ) {
результат. внутренний текст знак равно 'Нажата клавиша табуляции' ;
} еще {
результат. внутренний текст знак равно 'Клавиша табуляции не нажата' ;
}
В этом случае, когда пользователь нажмет клавишу Tab, добавленное уведомит о выполненном действии:
Способ 2. Обнаружение клавиши Tab в JavaScript с использованием метода document.getElementbyId()
“ документ.getElementById() ” можно использовать для доступа к определенному элементу HTML на основе его идентификатора. Этот метод может быть реализован для получения поля ввода и добавления события для оповещения пользователя о каждом нажатии определенной клавиши, например клавиши табуляции.
Синтаксис
документ. получитьэлементбиид ( элементы )В данном синтаксисе « элементы ” относится к идентификатору указанного элемента.
Давайте рассмотрим следующий пример.
Пример
В приведенном ниже примере включите тип ввода и значение заполнителя, как описано в предыдущем методе:
Теперь получите идентификатор поля ввода, используя « документ.getElementById() метод.
пусть input = document.getElementById («вкладка»);
Наконец, добавьте событие с именем « нажатие клавиши ' в методе addEventListener(), который будет предупреждать пользователя всякий раз, когда ' Вкладка клавиша нажата:
вход. addEventListener ( 'нажатие клавиши' , ( а также ) => {если ( а также. ключ === 'Вкладка' ) {
тревога ( 'Нажата клавиша табуляции' ) ;
}
} ) ;
Выход
Мы обсудили все самые простые методы обнаружения клавиши табуляции в JavaScript.
Вывод
Чтобы обнаружить клавишу табуляции в JavaScript, используйте « добавить прослушиватель событий () ” с “ документ.querySelector() ” для получения типа ввода и применения события для обнаружения указанного ключа или “ получитьэлемент по идентификатору() » для получения поля ввода на основе его идентификатора и уведомления пользователя всякий раз, когда добавленное условие выполняется. В этом блоге рассказывается об обнаружении клавиши табуляции в JavaScript.