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 // If you want to register a sequence combo |
|
例2
| 代码如下 | 复制代码 |
| <input id="input" value="default" type="text" /> <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时阻止
| 代码如下 | 复制代码 |
| <input id="input" value="default" type="text" /> <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文本框可以输入文字
例
| 代码如下 | 复制代码 |
|
<title>JS文字复制功能</title> <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> </head> <body> <input type="text" id="d" /> /body> |
|
例2
| 代码如下 | 复制代码 |
|
<textarea id="t1"></textarea> <div id="v1"></div> <textarea id="t2"></textarea> <div id="v2"></div> <textarea id="t3"></textarea> <div id="v3"></div> <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支持