Описание: Привязывает обработчик события к событию "keydown" JavaScript, или вызывает данное событие на элемент.
.keydown( handler(объектСобытия) )
Добавлена в версию: 1.0
handler(объектСобытия)
Функция выполняется каждый раз, когда вызывается событие.
.keydown( )
Добавлена в версию: 1.0
.keydown( [ данныеСобытия ], обработчик(объектСобытия)
Добавлена в версию: 1.4.3
данныеСобытия
Карта данных, которая будет передана в обработчик событий.
обработчик(объектСобытия)
Функция для выполнения каждый раз, когда событие вызвано.
Этот метод является сокращением для .bind('keydown', handler)
в первом варианте, и .trigger('keydown') во втором.
Событие keydown передается элементу, когда пользователь впервые нажимает клавишу на клавиатуре.
Оно может быть привязанно к любому элементу, но событие передается только элементу, который имеет фокус.
Фокусируемые элементы могут варьироваться между браузерами, но элементы формы всегда могут получать фокус как кандидаты на этот тип события.
Для примера, рассмотрим HTML:
<form> <input id="target" type="text" value="Hello there" /> </form> <div id="other"> Trigger the handler </div>
Обработчик события может быть привязан к полю ввода:
$('#target').keydown(function() {
alert('Handler for .keydown() called.');
});
Теперь, когда курсор находится внутри поля и клавиша нажата, будет выдано предупреждение:
Handler for .keydown() called.
Мы можем инициировать событие вручную, когда другой элемент нажат:
$('#other').click(function() {
$('#target').keydown();
});
После выполнения этого кода, нажатие на Trigger the handler также выдаст сообщение.
Если нажатие клавиши где-либо должно быть поймано (для примера,
глобальное сочетание клавиш на странице),
целесообразно приложить такое поведение к объекту document.
Потому что событие распространяется, все нажатия клавиш несут свой путь к объекту DOM document, если его явно не остановили.
Для определения, какая клавиша нажата, мы можем рассмотреть объект события,
который передается обработчику функции.
Хотя браузеры используют различные свойства для хранения этой информации,
jQuery нормализует свойство .which,
так что мы можем надежно использовать его для получения кода ключа.
Этот код соответствует клавише на клавиатуре, в том числе коды для специальных клавиш, таких как стрелки.
Для ловли фактического ввода текста, .keypress() может быть лучшим выбором.
Примеры
Для того, чтобы выполнять действия в зависимости от того, какая клавиша была нажата на клавиатуре, можно сделать так:$(window).keydown(function(event){
switch (event.keyCode) {
// ...
// different keys do different things
// Different browsers provide different codes
// see here for details: http://unixpapa.com/js/key.html
// ...
}
});
Пример 2
Показывает объект события для обработчика keydown, когда клавиша нажата в поле ввода.
var xTriggered = 0;
$('#target').keydown(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keydown();
});
Пример 2 - Полный код:
Показывает объект события для обработчика keydown, когда клавиша нажата в поле ввода.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://xhtml.co.il//scripts/events.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var xTriggered = 0;
$('#target').keydown(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keydown();
});
});
</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>
</body>
</html>
Была ли эта информация полезной?
