首頁 >web前端 >js教程 >jQuery簡單取得鍵盤事件的方法_jquery

jQuery簡單取得鍵盤事件的方法_jquery

WBOY
WBOY原創
2016-05-16 15:18:371520瀏覽

本文實例講述了jQuery簡單取得鍵盤事件的方法。分享給大家參考,具體如下:

一、我們何時要用到取得鍵盤事件

做web的時候,為了更人性的設計,我們有的時候會用到鍵盤事件。例如:輸入框下拉提示框,透過鍵盤的上下鍵盤來選擇自己想要的內容,google的輸入框的下拉提示。當我們瀏覽相簿的時候,我們可以能過鍵盤的左右鍵,來查看相片。當我們瀏覽長篇小說,用滑鼠滾動很容易不知道看到哪一個行了,可以通鍵盤上下鍵來進行翻頁,這些小細節也是非常重要的。做網站很大程度在於細節的處理。

二、jquery的鍵盤事情函數種類

1. keydown事件是在鍵盤按下時觸發的事件
2. keyup事件是在按下鍵彈起時觸發的事件
3. keypress事件是在鍵盤按下時觸發的事件

keypress和keydown在功能差不多,但是在取得事件的內容上有所不同。

二、舉例說明

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr" lang="utf-8">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<input value="fi" name="search" id="search_input" maxlength="50" autocomplete="off">
</body>
</html>
<script type="text/javascript">
 $('#search_input')
 .keypress(function(event){
 alert("keypress");
 })
 .keydown(function(event){
 alert("keydown");
 })
 .keyup(function(event){
 alert("keyup");
 });
</script>

三、試驗結果

1. 在上面的輸入框中,輸入一個字母r時,第一次會彈出keydown,以後都會提示keypress
2. 當我們按下pg dn銉時,會先彈出keyup然後在彈出keydown
3. 當我們按下shift+c時,只會彈出keypress
4. 當我們按下ctrl+alt時,就不會出現keypress,第一次會出現二個keydown,第二次按的時候,先出現keyup,然後在出現keydown

可能性很多,我們只要試試看常用的銉就可以了。

四、取得鍵盤事件對應的ASCII值

<script type="text/javascript">
 $('#search_input')
 .keydown(function(event){
 alert(event.keyCode);
 })
</script>

更多關於jQuery事件操作相關內容有興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結

希望本文所述對大家jQuery程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn