【www.bbyears.com--js教程】
1、keydown、keypress事件触发在文字还没敲进文本框,这时如果在keydown、keypress事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本
Keypress是一个强大的键盘输入捕捉JavaScript库 。拥有一些非常特殊的功能,它非常容易上手和使用,大小只有9KB,并且不依赖其它JS框架
代码如下keypress.combo("shift s", function() {
console.log("You pressed shift and s");
});
// There are also a few other shortcut methods:
// If we want to register a counting combo
keypress.counting_combo("tab space", function(e, count) {
console.log("You"ve pressed this " + count + " times.");
});
// If you want to register a sequence combo
keypress.sequence_combo("up up down down left right left right b a enter", function() {
lives = 30;
}, true);
例2
代码如下<script>
var input = document.getElementById("input");
input.onkeydown = function() {
console.log("onkeydown " + this.value);
}
input.onkeypress = function() {
console.log("onkeypress " + this.value);
}
input.onkeyup = function() {
console.log("onkeyup " + this.value);
}
</script>
在文本框中敲入数字1,输出结果为:
onkeydown default
onkeypress default
onkeyup default1
2、keypress事件与keydown和keyup的主要区别
1)对中文输入法支持不好,无法响应中文输入
2)无法响应系统功能键(如delete,backspace)
3)由于前面两个限制,keyCode与keydown和keyup不是很一直
3、在keyup事件中无法阻止浏览器默认事件,因为在keypress时,浏览器默认行为已经完成,即将文字输入文本框(尽管这时还没显示),这个时候不管是preventDefault还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown或keypress时阻止
代码如下
<script>
var input = document.getElementById("input");
input.onkeydown = function() {
//return false;
console.log("onkeydown " + this.value);
}
input.onkeypress = function() {
//return false;
console.log("onkeypress " + this.value);
}
input.onkeyup = function() {
return false;
console.log("onkeyup " + this.value);
}
</script>
结果为keydown、keypress事件中return false文本框无法输入文字,在keyup事件中return false文本框可以输入文字
例
代码如下<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
});
</script>
/body>
例2
代码如下
<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>
4、textInput事件
文本框的键盘响应事件把textInpput也加进来,触发的顺序为:keydown -> keypress ->textInput -> keyup
textInput事件是DOM3后支持的,主要用来替换keypress,与keypress的主要差别在于添加了对中文输入法的支持,还有一点就是textInput只在可编辑文本区才能触发(如input、textarea),而keypress是任何能获得焦点的控件的能触发(如button),但是textInput事件的支持还不是很好,目前只有safari、chrome支持