当前位置:首页 > 日记 > 正文

js禁止Backspace键使浏览器后退的实现方法

js禁止Backspace键使浏览器后退的实现方法

在项目中遇到按下Backspace键让浏览器后退的问题,上网搜了几种解决方案都不太理想。于是集众人之智,采众家之长,归纳如下:

1、在公用js中定义阻止Backspace的方法

function banBackSpace(e){ var ev = e || window.event; //各种浏览器下获取事件对象 var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget; //按下Backspace键 if(ev.keyCode == 8){ var tagName = obj.nodeName //标签名称 //如果标签不是input或者textarea则阻止Backspace if(tagName!='INPUT' && tagName!='TEXTAREA'){  return stopIt(ev); } var tagType = obj.type.toUpperCase();//标签类型 //input标签除了下面几种类型,全部阻止Backspace if(tagName=='INPUT' && (tagType!='TEXT' && tagType!='TEXTAREA' && tagType!='PASSWORD')){  return stopIt(ev); } //input或者textarea输入框如果不可编辑则阻止Backspace if((tagName=='INPUT' || tagName=='TEXTAREA') && (obj.readOnly==true || obj.disabled ==true)){  return stopIt(ev); } }}function stopIt(ev){ if(ev.preventDefault ){ //preventDefault()方法阻止元素发生默认的行为 ev.preventDefault(); } if(ev.returnValue){ //IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为 ev.returnValue = false; } return false;}

方法注释写的很清晰了,这里不过多解释。

2、页面加载完成就调用该方法

$(function(){ //实现对字符码的截获,keypress中屏蔽了这些功能按键 document.onkeypress = banBackSpace; //对功能按键的获取 document.onkeydown = banBackSpace; })

注:  按键事件触发顺序: keydown -> keypress ->textInput -> keyup

存在问题:select下拉列表展开后,无法获取键盘事件,此时按Backspace键,浏览器还是会回退到历史;解决办法:将select下拉框改为easyUI的combobox;

以上这篇js禁止Backspace键使浏览器后退的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

JavaScript 值类型和引用类型的初

JavaScript 值类型和引用类型的初

值类型,推荐,引用类型,电脑软件,JavaScript,值类型:也称为原始数据或原始值(primitive value)。这类值存储在栈(stack)中,栈是内存中一种特殊的数据结构,也称为线性表,栈按照后进先出的原则存储数据,先进入的数据被压入栈底,最后插入(push)的数据放在栈…

Laravel5.5新特性之友好报错以及展

Laravel5.5新特性之友好报错以及展

新特性,报错,详解,友好,电脑软件,前言期待已久的laravel5.5 很快将为大家呈现,本文将给大家详细介绍关于Laravel5.5新特性之友好报错及展示的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍:Laravel5.5 获取源代码如今Larave…

ES6正则表达式扩展笔记

ES6正则表达式扩展笔记

正则表达式,扩展,笔记,电脑软件, 前面的话  正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变。然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新。本文将详细介绍ES6正则表达式扩展…

正则表达式实现匹配连续数字的方法

正则表达式实现匹配连续数字的方法

数字,连续,正则表达式,方法,电脑软件,实现的要求如下:纯数字 5-7位之间 前三位相同 从第四位开始连续 如下面的例子:11123 #正确22234 #正确33345 #正确333456 #正确2223456 #正确0001234 #正确00012345 #错误:此行长度超…

在Excel表格中如何给数字添加单位

在Excel表格中如何给数字添加单位

单位,数字,表格,电脑软件,Excel,  在Excel表格中,我们一般只会输入数字,那么成绩分数单位该如何设置呢?以下是小编为您带来的关于在Excel表格中给数字添加单位,希望对您有所帮助。在Excel表格中给数字添加单位1、点击“开始”选项…

U盘装系统出现ntldr is missing

U盘装系统出现ntldr is missing

装系统,电脑软件,ntldr,missing,小编在使用U盘安装系统时,安装完系统后,重启电脑,系统却出现NTLDR is missing press any key to restart的错误提示,导致无法正常进入系统。这是怎么回事呢?今天小编就和大家说说解决U盘装系统出现ntldr is missi…

Yii清理缓存的方法

Yii清理缓存的方法

方法,清理缓存,电脑软件,Yii,本文实例讲述了Yii清理缓存的方法。分享给大家供大家参考,具体如下:html:复制代码 代码如下:<button onclick="clearCache()">ClearCache</button>js:function clearCache(){ $.get('../eng/index.php?r=site…

如何把ai路径导入c4d?ai路径导入c4d

如何把ai路径导入c4d?ai路径导入c4d

路径,通用方法,电脑软件,ai,c4d,ai制作的文字路径怎么导入c4d?如果想在C4D里做一个漂亮的字体,那么就需要在AI里做出效果,然后再导入C4D,那么问题来了,怎么把ai文件保存成路径文件,可以倒入c4d呢?下面小编就教大家ai路径导入c4d的通用方法,有图有…

PS怎么将人物图形打造成印章效果?

PS怎么将人物图形打造成印章效果?

图形,印章,效果,人物,电脑软件,如图这个是最终效果,具体怎么做,下面我们小编慢慢道来。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、我们首先打开PS,插入一张人像2、接着我们用磁性套索工具将人物抠…

详解node单线程实现高并发原理与no

详解node单线程实现高并发原理与no

单线程,异步,高并发,详解,原理,一、node单线程实现高并发原理众所周知nodejs是单线程且支持高并发的脚本语言。可为什么单线程的nodejs可以支持高并发呢?很多人都不明白其原理,下面我来谈谈我的理解:1. node的优点:I/O密集型处理是node的强项,因…

win7怎么隐藏硬盘分区

win7怎么隐藏硬盘分区

硬盘分区,电脑软件, 电脑用户们都知道Windows7系统分区是用于存放电脑上所安装的系统,但是打开计算机系统盘就会暴露在电脑操作手的面前,对于家里有小孩用电脑的用户来说,很容易被小孩误删了系统文件导致系统无法开机等问题,有没有什么好的方法…

基于Two.js实现星球环绕动画效果的

基于Two.js实现星球环绕动画效果的

动画效果,示例,星球,电脑软件,js,Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁。Two.js 有一个内置的动画循环,可搭配其他动画库。Two.js 包含可伸…