JS屏蔽页面某些按键的响应

最新推荐文章于 2020-11-27 16:09:48 发布

好吧我随便改的

最新推荐文章于 2020-11-27 16:09:48 发布

阅读量3.1k

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript

本文链接：https://blog.csdn.net/CHALLENG_EVERYTHING/article/details/48292183

版权

JAVASCRIPT 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

经常碰到这样的问题，页面上有个input控件，但是readonly属性为readonly，也就是只读的，当光标选中该控件时，无法输入任何内容，但是输入的按键其实被页面获取到了，会造成一个问题：

当在该控件输入回退按键（ESC)时，会导致页面直接返回上一个页面，因为页面响应了ESC的按键事件

因此，需要在页面加载时进行屏蔽（仅屏蔽当焦点在这些只读输入控件的时候的ESC按键事件）

代码如下：

<html>
<head>
  <title>测试页面</title>
  <script language="javascript">
   document.οnkeydοwn=function(){
       alert(window.event.keyCode);
    if(window.event.keyCode == 8){
     alert(window.event.srcElement.tagName);
     if(event.srcElement.name == "inputbox"){
         alert("!");
      window.event.keyCode = 0;
      event.returnValue = false;
     }
    }
   }
  </script>
</head>
<body>
  <input name="inputbox" id="inputbox" readonly="readonly"/>
</body>
</html>

当然，这里的判断条件如果改为下面这种，屏蔽所有只读输入栏的就更好了

if (
       (event.keyCode == 8)
       && ((event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")
         || event.srcElement.readOnly == true
         )