定義和用法
完整的 key press 過程分為兩個部分:1. 按鍵被按下;2. 按鍵被松開。
當按鈕被按下時,發生 keydown 事件。
keydown() 方法觸發 keydown 事件,或規定當發生 keydown 事件時運行的函數。
. 代碼如下:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>當發生 keydown 和 keyup 事件時,輸入域會改變顏色。請試著在其中輸入內容。</p>
</body>
</html>
眾所周知,jquery封裝了很多事件交互方法,這裡講到的問題在原生js中也是有的。
keyup是在用戶將按鍵抬起的時候才會觸發的,屬於整個按鍵過程中的最後階段,所以有其特定的用處,就是在左側輸入,右側同步顯示的過程中很有用處。典型的例子就是郵件編輯預覽的應用。
. 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#t1').live('keyup', function() {
$('#v1').text($(this).val());
});
$('#t2').live('keydown', function() {
$('#v2').text($(this).val());
});
$('#t3').live('keypress', function() {
$('#v3').text($(this).val());
});
});
</script>
</head>
<body>
<textarea id="t1"></textarea>
<div id="v1">
</div>
<textarea id="t2"></textarea>
<div id="v2">
</div>
<textarea id="t3"></textarea>
<div id="v3">
</div>
</body>
</html>
這裡分別應用了三種事件,其中t1能夠完整的同步到v1中,而keypress和keydown總是少最後一個字符,這樣就說明了這三種事件觸發的小小區別,keydown是在按下時觸發,不能得到最後的輸入結果,keypress也是一樣。
例如:keydown綁定文本框,每次點擊觸發事件,在獲取文本框的值,總是打印上次操作時文本框的內容,
這是因為keydown操作後,事件觸發了,但值還未顯示在文本框中,所以這類操作要用keyup 一個完整的按鍵動作後,才可以獲取文本框的值。
keydown與keypress更適用於通過鍵盤控制頁面類功能的實現。
獲取鍵盤點擊的鍵位:
. 代碼如下:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
</head>
<body>
請隨意鍵入一些字符:<input type="text" />
<p>當您在上面的框中鍵入文本時,下面的 div 會顯示鍵位序號。</p>
<div />
</body>
</html>