В таких сценариях, как проверка и проверка данных, стиль элементов поля изменяется каждый раз, когда пользователь отпускает одну нажатую клавишу на клавиатуре. Это изменение стиля относительно каждого нажатия или отпускания клавиши выполняется с помощью обработчиков событий, предоставляемых jQuery. Точнее, обработчик событий или метод, который обрабатывает или вызывает функцию при отпускании любой нажатой клавиши, — это « клавиатура ()».
С другой стороны, метод, который обрабатывает или вызывает нажатие функциональной клавиши, — это « нажатие клавиши ()», и вы можете проверить наш связанный статья для этого мероприятия.
В этом блоге мы предоставим краткое описание метода jQuery keyup().
Как использовать метод jQuery keyup()?
jQuery» клавиатура ()» запускает анонимную функцию всякий раз, когда пользователь перестает нажимать или вводить клавиши внутри выбранного поля. Этот метод также используется для применения динамического стиля к выбранному элементу в режиме реального времени.
Синтаксис
Синтаксис, используемый для метода jQuery keyup(), следующий:
$ ( 'этот' ) . клавиатура ( customFunc )
В приведенном выше синтаксисе: « этот » — выбранный элемент HTML, а « customFunc «» — это функция, которая выполняется « клавиатура ” метод над “ этот ».
Приведем пару примеров для более глубокого понимания.
Пример 1. Изменение цвета текста с помощью метода «keyup()».
В этом случае цвет введенного текста будет изменен на другой цвет, когда пользователь отпустит уже нажатую клавишу, как показано ниже:
< HTML >
< голова >
< сценарий источник '=' 'https://code.jquery.com/jquery-3.7.0.js' >< / сценарий >
< сценарий >
$(документ).ready(функция() {
$('#demo').keyup(function() {
$('#demo').css('цвет', 'зеленый лес');
});
});
< / сценарий >
< / голова >
< тело >
< div >
Введите данные Linuxhint: < вход идентификатор '=' 'демо' тип '=' 'текст' / >
< / div >
< / тело >
< / HTML >
Описание приведенного выше кода приведено ниже:
- Сначала импортируйте jQuery в проект, вставив его онлайн-CDN, посетив эту страницу. связь официальной документации.
- Затем создайте анонимную функцию, которая будет вызываться, когда « документ или страница загружается. Эта функция выбирает элемент HTML с идентификатором «demo» и присоединяет « клавиатура ()» с ним.
- « клавиатура ()» вызывает функцию обратного вызова, которая использует « CSS ()», чтобы установить цвет шрифта текста на « зеленый лес ».
- Теперь создайте выбранный «< вход >» внутри элемента «< тело >» и присвойте ему идентификатор « демо ».
Предварительный просмотр веб-страницы после завершения процесса компиляции:
Вывод показывает, что цвет текста меняется при отпускании выбранной клавиши.
Пример 2. Динамическое изменение цвета фона
В этом примере для выбранного элемента HTML будут установлены разные цвета фона всякий раз, когда пользователь оставляет нажатую клавишу. Давайте посмотрим на код для этого сценария:
< голова >< сценарий источник '=' 'https://code.jquery.com/jquery-3.7.0.js' >< / сценарий >
< сценарий >
пусть фонОттенки '=' [ 'Аквамарин' , 'Оранжево-красный' , 'кадетсиний' , 'зеленый лес' ,
'светло-серый' , 'песчано-коричневый' , 'пурпурный' , 'берливуд' ] ;
пусть Дж '=' 0 ;
$ ( документ ) .keyup ( функция ( событие ) {
$ ( '#хгг' ) .css ( 'фоновый цвет' , фонОттенки [ дж ] ) ;
j++;
дж '=' j% 9 ;
} ) ;
< / сценарий >
< / голова >
< тело >
< ч1 стиль '=' 'Цвет: морской зеленый' >Статья о Linux< / ч1 >< бр >
< div идентификатор '=' 'хгг' стиль '=' «отступ: 10 пикселей» >
< ч2 >Клавиатура jQuery, используемая для установки разных Фон каждый раз, когда клавиша отпускается.< / ч2 >
< бр / >
< / div >
< / тело >
Описание приведенного выше кода:
- Сначала импортируйте jQuery в свой проект, добавив jQuery CDN внутри «< голова >» тег.
- Затем создайте массив с именем « фонОттенки », который содержит восемь случайных цветов.
- Далее « клавиатура ()» прикреплен к методу « документ » и вызывает анонимную функцию обратного вызова. Эта функция выбирает элемент HTML с идентификатором « хгг » и применяет CSS « фоновый цвет ' свойство.
- Массив « фонОттенки передается в качестве значения свойств CSS, а индекс устанавливается равным « дж ' переменная. Эта переменная каждый раз увеличивается на единицу и перезапускается с « 0 ” индекс, когда значение достигает “ 8 ». Поскольку максимальный индекс в массиве равен « 7 ».
- После этого создайте выбранный « div ” элемент с идентификатором “ хгг », цвет фона этого элемента будет изменен при отпускании нажатой клавиши.
Предварительный просмотр веб-страницы после компиляции:
Вывод подтверждает, что цвет фона для выбранного элемента HTML меняется каждый раз, когда отпускается нажатая или выбранная клавиша. Это все, что касается использования « клавиатура ()».
Заключение
jQuery» клавиатура ()» запускает функцию обратного вызова для выбранного элемента HTML, когда нажатая клавиша отпущена. Этот метод не вызывается при нажатии клавиши, но во время отпускания или нажатия клавиши эта функция выполняет функцию обратного вызова. В этом блоге объясняется использование и работа метода jQuery keyup().