.keypress()
.keypress( handler(eventObject) ) 返回:jQuery
描述: 為 "keypress" 事件綁定一個(gè)處理函數(shù),或者觸發(fā)元素上的 "keypress" 事件。
-
version added: 1.0.keypress( handler(eventObject) )
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
-
version added: 1.4.3.keypress( [ eventData ], handler(eventObject) )
eventData將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
version added: 1.0.keypress()
這個(gè)函數(shù)的第一種用法是 .bind('keypress', handler) 的快捷方式,第二種用法是 .trigger('keypress') 的快捷方式。
當(dāng)瀏覽器捕獲一個(gè)元素鍵盤輸入時(shí)keypress就會(huì)發(fā)送個(gè)元素。這是類似keydown事件,除了在關(guān)鍵重復(fù)情況。如果用戶按下并按住這個(gè)鍵,一keydown事件觸發(fā)一次,但不同的是keypress為每個(gè)插入的字符都觸發(fā)事件。此外,組合鍵(如Shift)會(huì)觸發(fā)keydown事件,但不會(huì)觸發(fā)keypress事件。
keypress事件處理程序可以連接到任何元素,但該事件只是發(fā)送到具有焦點(diǎn)的元素上。在不同瀏覽器之間聚焦元素可以有很多,但是表單元素總是能獲取焦點(diǎn),所以對(duì)于此事件類型表單元素是最合適的。
舉個(gè)例子,看下面的代碼
<form> <fieldset> <input id="target" type="text" value="Hello there" /> </fieldset> </form> <div id="other"> Trigger the handler </div>
這個(gè)事件處理程序可以綁定到input field:
$('#target').keypress(function() {
alert('Handler for .keypress() called.');
});
現(xiàn)在當(dāng)光標(biāo)插入點(diǎn)位于表單域并一個(gè)鍵被按下,警告將被顯示:
Handler for .keypress() called.
當(dāng)不同的元素被點(diǎn)擊時(shí)我們也可以觸發(fā)這個(gè)事件:
$('#other').click(function() {
$('#target').keypress();
});
這些代碼執(zhí)行后,點(diǎn)擊Trigger the handler同樣警報(bào)顯示。
如果需要任何按鍵被捕獲(例如,要實(shí)現(xiàn)網(wǎng)頁(yè)全局上的快捷鍵),附加此事件到document對(duì)象是非常有用的。由于事件冒泡,所有的按鍵將使他們DOM方式注冊(cè)到document對(duì)象上,除非明確停止。
要確定哪個(gè)鍵被按下,我們可以檢測(cè)傳遞給處理函數(shù)的event 對(duì)象。而瀏覽器使用不同的屬性來存儲(chǔ)這些信息,jQuery的規(guī)范了.which屬性,以便我們能夠可靠地使用它來檢索關(guān)鍵代碼。此代碼對(duì)應(yīng)一個(gè)鍵盤上的按鍵,包括想箭頭這種特殊鍵的代碼,為捕獲實(shí)際輸入文本, .keypress()可能是一個(gè)更好的選擇。
值得注意的是keydown 和 keyup提供一個(gè)代碼,顯示哪一個(gè)鍵被按下,而keypress顯示的哪個(gè)字符被輸入。例如,一個(gè)小寫的“a”將被報(bào)告為65 keydown和keyup ,但通過 keypress 顯示的是97。一個(gè)大寫字母“A”的報(bào)告為65歲的所有事件。由于這種區(qū)別,當(dāng)捕捉特殊按鍵,如箭頭,.keydown()或.keyup()是較好的選擇。
Example:
Show the event object for the keypress handler when a key is pressed in the input.
<!DOCTYPE html>
<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.min.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="/scripts/events.js"></script>
<script>
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>
</body>
</html>