Содержание:
.on( "keyup" [, eventData ], handler )Возвращает: jQuery
Описание: Привязывает обработчик события к событию "keyup".
-
версия добавлена: 1.7.on( "keyup" [, eventData ], handler )
Эта страница описывает событие keyup. Для устаревшего метода .keyup(), см. .keyup().
Событие keyup отправляется элементу, когда пользователь отпускает клавишу на клавиатуре. Оно может быть привязано к любому элементу, но событие отправляется только элементу, у которого есть фокус. Элементы, которые могут получить фокус, могут различаться в разных браузерах, но элементы формы всегда могут получить фокус, поэтому они являются разумными кандидатами для этого типа события.
Например, рассмотрим HTML:
<form> <input id="target" type="text" value="Hello there"> </form> <div id="other"> Trigger the handler </div>
Обработчик события может быть привязан к полю ввода:
$( "#target" ).on( "keyup", function() {
alert( "Handler for `keyup` called." );
} ); Теперь, когда курсор находится внутри поля и пользователь нажимает и отпускает клавишу, отображается сообщение с оповещением:
Обработчик для `keyup` вызван.
Чтобы вручную сгенерировать событие, используйте .trigger( "keyup" ):
$( "#other" ).on( "click", function() {
$( "#target" ).trigger( "keyup" );
} ); После выполнения этого кода, щелчки по Запустить обработчик также будут отображать это сообщение с оповещением.
Если необходимо поймать нажатия клавиш в любом месте (например, для реализации глобальных горячих клавиш на странице), полезно привязать это поведение к объекту document. Из-за событие всплытия все нажатия клавиш достигнут объекта document, если их явно не остановить.
Чтобы определить, какая клавиша была нажата, проверьте объект события, который передается в функцию-обработчик. Хотя браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство .which, поэтому вы можете надёжно использовать его для получения кода клавиши. Этот код соответствует клавише на клавиатуре, включая коды для специальных клавиш, таких как стрелки. Для захвата фактического ввода текста, .keypress() может быть лучшим выбором.
Пример:
Покажите объект события для обработчика keyup (используя простой плагин $.print), когда клавиша отпускается в поле ввода.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
fieldset {
margin-bottom: 1em;
}
input {
display: block;
margin-bottom: .25em;
}
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<form>
<fieldset>
<label for="target">Type Something:</label>
<input id="target" type="text">
</fieldset>
</form>
<button id="other">
Trigger the handler
</button>
<script type="text/javascript" src="/resources/events.js"></script>
<script>
var xTriggered = 0;
$( "#target" ).on( "keyup", function( event ) {
xTriggered++;
var msg = "Handler for `keyup` called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
} ).on( "keydown", function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
} );
$( "#other").on( "click", function() {
$( "#target" ).trigger( "keyup" );
} );
</script>
</body>
</html> Демо:
.trigger( "keyup" )Возвращает: jQuery
Описание: Сгенерировать событие "keyup" на элементе.
-
версия добавлена: 1.0.trigger( "keyup" )
- "keyup"Тип: строкаСтрока
"keyup".
-
См. описание для .on( "keyup", ... ).
