keypress event — jQuery

Привяжите обработчик событий к событию "keypress" или вызовите это событие на элементе.

Содержание:

.on( "keyup" [, eventData ], handler )
- .on( "keyup" [, eventData ], handler )
.trigger( "keyup" )
- .trigger( "keyup" )

.on( "keyup" [, eventData ], handler )Возвращает: jQuery

Описание: Привязывает обработчик событий к событию "keypress".

версия добавлена: 1.7.on( "keyup" [, eventData ], handler )
- "keyup"
  
  Тип: строка
  
  Строка "keyup".
- eventData
  
  Тип: Любое
  
  Объект, содержащий данные, которые будут переданы обработчику события.
- handler
  
  Тип: Функция( Event eventObject )
  
  Функция, которая выполняется каждый раз при срабатывании события.

Эта страница описывает событие keypress. Для устаревшего метода .keypress() см. .keypress().

Примечание: поскольку событие keypress не охвачено никакой официальной спецификацией, фактическое поведение при его использовании может отличаться в разных браузерах, версиях браузеров и платформах.

Событие keypress отправляется элементу, когда браузер регистрирует ввод с клавиатуры. Это аналогично событию keydown, за исключением того, что модификаторы и непечатные клавиши, такие как Shift, Esc и delete, вызывают события keydown, но не события keypress. Другие различия между двумя событиями могут возникнуть в зависимости от платформы и браузера.

Обработчик события keypress может быть прикреплен к любому элементу, но событие отправляется только на элемент, у которого есть фокус. Фокусируемые элементы могут отличаться в разных браузерах, но элементы управления формами всегда могут получить фокус, поэтому являются подходящими кандидатами для этого типа событий.

Например, рассмотрим HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there">
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

Обработчик событий можно привязать к полю ввода:

$( "#target" ).on( "keypress", function() {
  console.log( "Handler for `keypress` called." );
} );

Теперь, когда курсор находится внутри поля, нажатие клавиши отображает запись:

Обработчик для `keypress` вызван.

Чтобы вызвать событие вручную, используйте .trigger( "keypress" ):

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "keypress" );
} );

После выполнения этого кода щелчки по div Вызвать обработчик также будут записывать сообщение.

Если необходимо отслеживать нажатия клавиш в любом месте (например, для реализации глобальных сочетаний клавиш на странице), полезно привязать это поведение к объекту document. Из-за распространения событий все нажатия клавиш пройдут вверх по DOM к объекту document, если их явно не остановить.

Чтобы определить, какой символ был введён, проверьте объект event, который передаётся функции-обработчику. Хотя браузеры используют различные свойства для хранения этой информации, jQuery нормализует свойство .which, чтобы вы могли надёжно использовать его для извлечения кода символа.

Обратите внимание, что keydown и keyup предоставляют код, указывающий, какая клавиша нажата, в то время как keypress указывает, какой символ был введён. Например, строчная буква "a" будет отображаться как 65 по keydown и keyup, но как 97 по keypress. Заглавная буква "A" отображается как 65 всеми событиями. Из-за этого различия при отслеживании нажатия специальных клавиш, таких как клавиши со стрелками, .keydown() или .keyup() являются лучшим выбором.

Пример:

Отображение объекта события при нажатии клавиши в поле ввода. Примечание: Эта демонстрация использует простой плагин $.print() (https://api.jquery.com/resources/events.js) для вывода объекта события.

<!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 src="/resources/events.js"></script>
 
<script>
var xTriggered = 0;
$( "#target" ).on( "keypress", function( event ) {
  if ( event.which == 13 ) {
     event.preventDefault();
  }
  xTriggered++;
  var msg = "Handler for `keypress` called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
} );
 
$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "keypress" );
} );
</script>
 
</body>
</html>

Демонстрация:

.trigger( "keyup" )Возвращает: jQuery

Описание: Вызывает событие "keyup" на элементе.

версия добавлена: 1.0.trigger( "keyup" )
- "keyup"
  
  Тип: строка
  
  Строка "keyup".

См. описание для .on( "keyup", ... ).

событие keypress

Содержание:

.on( "keyup" [, eventData ], handler )Возвращает: jQuery

версия добавлена: 1.7.on( "keyup" [, eventData ], handler )

Пример:

Демонстрация:

.trigger( "keyup" )Возвращает: jQuery

версия добавлена: 1.0.trigger( "keyup" )