不用圖片作背景CSS做的小燈籠效果_練習用
695
2024-04-03
本文實例講述了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="http://www.gimoo.net/t/1903/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程序設計有所幫助。
