jQuery鍵盤事件之keypress()事件
在input元素上綁定keydown事件會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題:
每次獲取的內(nèi)容都是之前輸入的,當(dāng)前輸入的獲取不到
keydown事件觸發(fā)在文字還沒(méi)敲進(jìn)文本框,這時(shí)如果在keydown事件中輸出文本框中的文本,得到的是觸發(fā)鍵盤事件前的文本,而keyup事件觸發(fā)時(shí)整個(gè)鍵盤事件的操作已經(jīng)完成,獲得的是觸發(fā)鍵盤事件后的文本
當(dāng)瀏覽器捕獲鍵盤輸入時(shí),還提供了一個(gè)keypress的響應(yīng),這個(gè)跟keydown是非常相似,這里使用請(qǐng)參考keydown這一節(jié),具體說(shuō)說(shuō)不同點(diǎn)
keypress事件與keydown和keyup的主要區(qū)別
- 只能捕獲單個(gè)字符,不能捕獲組合鍵
- 無(wú)法響應(yīng)系統(tǒng)功能鍵(如delete,backspace)
- 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符
總而言之,
KeyPress主要用來(lái)接收字母、數(shù)字等ANSI字符,而 KeyDown 和 KeyUP 事件過(guò)程可以處理任何不被 KeyPress 識(shí)別的擊鍵。諸如:功能鍵(F1-F12)、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
em{
font-weight: 900;
color: red;
}
</style>
<script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>keypress()事件</h2>
<div class="left">
<div class="aaron">監(jiān)聽(tīng)keypress輸入:
<input class="target1" type="text" value="" /><br />
輸入中文測(cè)試,無(wú)法顯示:<em></em>
</div>
</div>
<script type="text/javascript">
//監(jiān)聽(tīng)鍵盤按鍵
//獲取輸入的值
$('.target1').keypress(function(e) {
$("em").text(e.target.value)
});
</script>
</body>
</html>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求