文档章节

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

北风其凉
 北风其凉
发布于 2016/05/20 00:29
字数 685
阅读 831
收藏 6

大部分浏览器在浏览网页时,按退格键(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的试验并没有成功。

这个问题网上有人说是因为Firefox用了W3C DOM,而IE用的是IE DOM。但即使用了变通的办法获取到了Firefox的event,也无法阻止退格键对页面的后退。

再后来,我发现了Firefox本身就提供了一个屏蔽退格键的功能。进入Firefox的about:config页面,找到属性browser.backspace_action,这个属性的介绍可以参考页面:

http://kb.mozillazine.org/Browser.backspace_action

这个属性的值,有0、1、其他三类取值:

0:按下Backspace键后会返回session历史中上一个打开的页面,按下Shift+Backspace键反之。(Windows系统默认)

1:按下Backspace键后会在当前页的基础上向上滚动一页,按下Shift+Backspace键反之。(2006年12月7日以前编译的Linux默认)

其他:填写其他任何整数值都会屏蔽BackSpace键。(2006年12月7日以后编译的Linux版本,默认值为2)

将这个配置项设为2,就可以屏蔽掉Firefox浏览器的BackSpace快捷键了。

END

© 著作权归作者所有

北风其凉

北风其凉

粉丝 119
博文 498
码字总数 463468
作品 4
朝阳
程序员
私信 提问
加载中

评论(1)

北风其凉
北风其凉 博主
Google Chrome 将禁止“退格键”作为后退按钮使用 https://www.oschina.net/news/73603/google-chrome-use
屏蔽相应键盘按钮

原文链接:http://blog.csdn.net/21aspnet/article/details/1535777

晨曦之光
2012/03/09
90
0
printf 标准输出格式

printf ‘输出类型输出格式’ 输出内容 输出类型 %ns 输出字符串。n 是数字,代指输出几个字符。 %ni 输出整数。n 是数字,代指输出几个数字。 %m.nf 输出浮点数。m 和 n 是数字,代指输出的...

YZBTDIY的博客
2017/12/20
0
0
Google Chrome 将禁止“退格键”作为后退按钮使用

在Google Chrome浏览器中,“退格键(Backspace)”具有“后退/转到上一页”的功能,如果用户在一个页面输入了内容,不小心点击退格键不是删除一个单词而是删除了所有输入的内容,这给用户造...

oschina
2016/05/21
7.6K
34
javascript高级编程运用

一//各种尺寸 (size) s += "rn网页可见区域宽:"+ document.body.clientWidth; s += "rn网页可见区域高:"+ document.body.clientHeight; s += "rn网页可见区域高:"+ document.body.offset......

crossmix
2015/04/19
47
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
12
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
22
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
14
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
24
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部