js检测按键的跨浏览器解决方案

最新推荐文章于 2023-07-28 01:19:05 发布

callmeevil

最新推荐文章于 2023-07-28 01:19:05 发布

阅读量370

点赞数

分类专栏： javascript 文章标签：键盘记录

本文链接：https://blog.csdn.net/callmeevil/article/details/51381956

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何解决不同浏览器（如IE11以下、firefox46、chrome50）中输入框按下回车无法触发提交按钮的问题。特别关注了事件处理在不同浏览器间的差异，提出了在函数定义参数中传递事件对象的方法，以及如何通过HTML属性直接传递事件参数以确保兼容性。

摘要由CSDN通过智能技术生成

测试浏览器：IE11以下，firefox46，chrome50.

一、问题场景：

一个表单，提交按钮为input type=submit。改为button后，无法实现按下回车提交。

tips：如果只有一个input，则按下回车就会提交

如果有多个input，则input的type为submit时才能按下回车提交

如果提交按钮为button，按下回车不会提交。

二、解决

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
    <script type="text/javascript">
    function addEvent(a, b, c) {
        a.addEventListener ? a.addEventListener(b, c) : a.attachEvent && a.attachEvent("on" + b, c)
    };

    //event必须写在函数<strong>定义</strong>的<strong>参数部分</strong>（但是调用时不需要，否则firefox报错event为定义），否则firefox不能识别event.keyCode;    	
    function handler(event) {
    	//event.which必须在event.keyCode前，因为firefox下如果事件是onkeypress，按下可打印字符时event.keyCode为0        	
        var keynum = "which: " + event.which || "keyCode: " + event.keyCode;        
        alert(keynum)
    }

    addEvent(document, "keypress", handler);
    </script>
    <form>        
        <input id="xxx" type="text" />
    </form>
</html>

IE和chrome能很好的支持window.event，但是firefox不行，必须把event写在函数定义的参数部分。

如果

 addEvent(document, "keypress", handler);

改为

 addEvent(document, "keypress", handler(event));

则firefox会报错：event为定义。

但如果在html中传入参数，则不会报错。比如上面的代码可以改为

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
    <script type="text/javascript">
    function handler(e) {    
        var ev=window.event?window.event:e; 	
        var keynum = "which: " + ev.which  || "keyCode: " + ev.keyCode;
        alert(keynum);
    }
        
    </script>
    <form>        
        <input id="xxx" type="text" οnkeypress="return handler(event)" />
    </form>
</html>

通过元素的οnkeypress=来传送event参数就可以。

三、注意

1、onkeypress与onkeydown/onkeyup区别

返回值不同：前者返回ASCII码，后者返回按键的ascii码，无论大小写；