关于屏蔽浏览器退格键的几个尝试

最新推荐文章于 2020-11-17 21:55:37 发布

chenzai1946

最新推荐文章于 2020-11-17 21:55:37 发布

阅读量675

点赞数 1

文章标签：操作系统

原文链接：https://my.oschina.net/Tsybius2014/blog/678288

版权

大部分浏览器在浏览网页时，按退格键（BackSpace）会触发后退操作。但我希望尝试下如何屏蔽此功能。

我使用的操作系统为Win7，我用于测试的三个浏览器版本信息如下：

1、Internet Exlorer 8.0.7601.17514（后面简称IE8）

2、Google Chrome 50.0.2661.102 m（后面简称Chrome）

3、Firefox 46.0.1（后面简称Firefox）

从网上搜集的资料表明，可以通过添加js代码的方式屏蔽退格键。

如有页面page1.html代码如下：

<html>
  <head>
    <title>测试页面1</title>
  </head>
  <body>
    <input type="button" id="openNewPage" value="打开新页面" onclick="openNewPage();" />
    <script>
      function openNewPage() {
        window.location.href = "file:///C:/Users/Tsybius/Desktop/ShieldBpTest/page2.html";
      }
    </script>
  </body>
</html>

该页面可以打开另一个页面page2.html：

<html>
  <head>
    <title>测试页面2</title>
  </head>
  <body>
    <p>这是一张测试页面</p>
    <input type="text" id="testText" />
    <script>
        //参考自 http://q821424508.iteye.com/blog/1587025
        window.onload = function() {  
            if (navigator.userAgent.indexOf('Firefox') >= 0) {
                alert("检测到您正使用火狐浏览器，请将 about:config 中 browser.backspace_action 设置为 2");
                return;
            }
            document.getElementsByTagName("body")[0].onkeydown = function() {
                if(event.keyCode==8) {
                    var elem = event.srcElement || event.currentTarget;
                    var name = elem.nodeName;
                    if(name!='INPUT' && name!='TEXTAREA') {
                        return _stopIt(event);  
                    }  
                    var type_e = elem.type.toUpperCase();  
                    if(name=='INPUT' && (type_e!='TEXT' && type_e!='TEXTAREA' && type_e!='PASSWORD' && type_e!='FILE')) {
                        return _stopIt(event);  
                    }  
                    if(name=='INPUT' && (elem.readOnly==true || elem.disabled ==true)){  
                        return _stopIt(event);  
                    }  
                }  
            };
        };
        function _stopIt(e) {  
            if(e.returnValue) {  
                e.returnValue = false ;  
            }  
            if(e.preventDefault){  
                e.preventDefault();  
            }
            return false;  
        }  
    </script>
  </body>
</html>

这个方式经过试验，通过点击page1的按钮进入到page2后，在page2按下退格键，如果当前焦点在文本输入框中则可进行正常的删除，否则并不会触发退后功能。不过这个方法适用于Chrome和IE8，在Firefox的试验并没有成功。