码迷,mamicode.com
首页 > 其他好文 > 详细

Chrome中的onkeypress 的keyCode BUG

时间:2014-04-29 13:41:21      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:keypress   keydown   chrome   

在Chrome中onkeypress的keyCode和onkeydown中的keyCode并不一致...


其中onkeypress无法捕获F1~F12,onkeydown可以捕获


onkeypress捕获a-z时区分大小写,onkeydown不区分大小写。


最主要的一个问题就在于a-z的大小写,由于onkeypress不捕获F1~F12,但是区分a-z的大小写。而且直接用的字母的ascii码,就导致小写字母的一部分keyCode覆盖了F1~F12,因而判断这里的keyCode的时候,会发生混乱。


如下测试(输入的abctuvABCTUV):

mamicode.com,码迷

可以看到在输入小写字母的时候,keypress和keydown完全不一样,在输入大写字母的时候,两者是一致的。


因而,在使用时必须注意。在Chrome和IE中使用keydown完全能达到要求,似乎在firefox中需要用keypress,如果想要两者都兼容怎么办?


千万不要同时写keypress和keydown,这样在你输入小写字母“t"的时候,说不定就引发了F5刷新的效果。


至于应该怎么做,还是建议判断浏览器,然后设置对应的事件。


最后附上测试代码:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>KeyPress Test</title>
    <script>
        document.onkeypress = keypress;
        function keypress() {
			document.getElementById(‘keypress‘).value += ‘\n‘ + (‘keyCode:‘+event.keyCode);
        }
		document.onkeydown = keydown;
        function keydown() {
			document.getElementById(‘keydown‘).value += ‘\n‘ + (‘keyCode:‘+event.keyCode);
        }
		function Clear(){
			document.getElementById(‘keypress‘).value = ‘‘;
			document.getElementById(‘keydown‘).value = ‘‘;
		}
    </script>
</head>
<body>
<input type="button" value="Clear" onclick="Clear()" style="width:305px"/><br/>
KeyPress - keyCode Result:<br/>
<textarea id="keypress" style="width:300px;height:200px" readonly></textarea><br/>
KeyDown - keyCode Result:<br/>
<textarea id="keydown" style="width:300px;height:200px" readonly></textarea>
</body>
</html>


Chrome中的onkeypress 的keyCode BUG

标签:keypress   keydown   chrome   

原文地址:http://blog.csdn.net/isea533/article/details/24691243

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!