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

来源：互联网发布：广西干部网络培训学院编辑：程序博客网时间：2024/06/08 03:55

测试浏览器：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" onkeypress="return handler(event)" />    </form></html>

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

三、注意

1、onkeypress与onkeydown/onkeyup区别

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

前者不能支持"F1", "CAPS LOCK"、"Home"等功能键，后者可以
另外，onkepress事件下，firefox不能正确识别keycode，需要用event.which替代

0 0