Описание: Привязывает обработчик события к событию "keypress" JavaScript, или вызывает данное событие на элемент.
.keypress( handler(объектСобытия) )
Добавлена в версию: 1.0
handler(объектСобытия)
Функция выполняется каждый раз, когда вызывается событие.
.keypress( )
Добавлена в версию: 1.0
.keypress( [ данныеСобытия ], обработчик(объектСобытия)
Добавлена в версию: 1.4.3
данныеСобытия
Карта данных, которая будет передана в обработчик событий.
обработчик(объектСобытия)
Функция для выполнения каждый раз, когда событие вызвано.
Этот метод является сокращением для .bind('keypress', handler)
в первом варианте, и .trigger('keypress') во втором.
Событие keypress передается элементу, когда браузер регистрирует ввод с клавиатуры.
Это подобно событию keydown, за исключением случаев повторения ввода.
Если пользователь нажимает и держит кнопку, событие keydown
вызывается единожды, но отдельные события keypress
вызываются на каждый нажатый символ.
В добавок, клавиши-модификаторы (такие как Shift) являются причиной событий keydown, но не событий keypress.
Обработчик события keypress может быть привязан к любому элементу,
но событие передается только элементу, имеющему фокус.
Фокусируемые элементы могут варьироваться между браузерами, но элементы формы всегда могут получить фокус, как разумные кандидаты для этого типа события.
Для примера, рассмотрим HTML:
<form> <fieldset> <input id="target" type="text" value="Hello there" /> </fieldset> </form> <div id="other"> Trigger the handler </div>
Обработчик события может быть связан с полем ввода:
$('#target').keypress(function() {
alert('Handler for .keypress() called.');
});
Теперь, когда курсор находится внутри поля ввода и клавиша нажата, будет выдано предупреждение:
Handler for .keypress() called.
Сообщение повторяется, если клавиша нажата. Мы можем инициировать событие вручную, когда нажат другой элемент:
$('#other').click(function() {
$('#target').keypress();
});
После выполнения этого кода, нажатие на Trigger the handler также выдаст сообщение.
Если нажатие клавиши где-либо должно быть поймано (для примера, глобальное сочетание клавиш на странице), целесообразно приложить такое поведение к объекту document.
Потому что событие распространяется, все нажатия клавиш несут свой путь к объекту DOM document, если его явно не остановили.
Для определения, какая клавиша нажата, мы можем рассмотреть объект события, который передается обработчику функции.
Хотя браузеры используют различные свойства для хранения этой информации, jQuery нормализует свойство .which, так что мы можем надежно использовать его для получения кода символа.
Обратите внимание, что keydown и keyup
обеспечивают код с указанием того, какая клавиша нажата, в то время как keypress указывает какой символ нажат.
Для примера, символ нижнего регистра "a" считается как 65 с keydown и keyup, и как 97 с keypress.
Символ верхнего регистра "A" считается как 65 во всех событиях.
Из-за этого различия, во время ловли специальных клавиш, таких как клавиши со стрелками, .keydown() или .keyup() будет лучшим выбором.
Примеры
В этом примере внизу отображается код текущей нажатой клавиши, а в строку выше добавляются лишь буквы латинского алфавита и пробелы.
$("input").keypress(function (e) {
if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
|| (97 <= e.which && e.which <= 97 + 25)) {
var c = String.fromCharCode(e.which);
$("p").append($(""))
.children(":last")
.append(document.createTextNode(c));
} else if (e.which == 8) {
// backspace in IE only be on keydown
$("p").children(":last").remove();
}
$("div").text(e.which);
});
Пример 1 - Полный код:
В этом примере внизу отображается код текущей нажатой клавиши, а в строку выше добавляются лишь буквы латинского алфавита и пробелы.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("input").keypress(function (e) {
if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
|| (97 <= e.which && e.which <= 97 + 25)) {
var c = String.fromCharCode(e.which);
$("p").append($("<span/>"))
.children(":last")
.append(document.createTextNode(c));
} else if (e.which == 8) {
// backspace in IE only be on keydown
$("p").children(":last").remove();
}
$("div").text(e.which);
});
});
</script>
<style>
input { margin:10px; }
p { color:blue; margin:10px; font-size:18px; }
p.hilite { background:yellow; }
div { color:red; }
</style>
</head>
<body>
<input type="text" />
<p>Add text - </p>
<div></div>
</body>
</html>
Пример 2
Показывает объект события для обработчика keypress, когда клавиша нажата в поле ввода.
var xTriggered = 0;
$('#target').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keypress() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keypress();
});
Пример 2 - Полный код:
Показывает объект события для обработчика keypress, когда клавиша нажата в поле ввода.<!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').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keypress() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keypress();
});
});
</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>
Была ли эта информация полезной?
