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

这里主要参考博客http://q821424508.iteye.com/blog/1587025

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键使浏览器后退的更多相关文章

  1. JS禁止后退键(backspace)使浏览器后退

    背景说明: 今天项目测试中,同事发现一个Bug,当键盘敲下后退键(Backspace)后,浏览器自动后退,不符合需求,故建议禁止浏览器后退键. 提出需求: 当键盘敲下后退键(Backspace)后 1 ...

  2. js禁用"Backspace"键(即禁止网页倒退)

    项目遇到的一个问题一个普通网页,如果这个网页上没有焦点的话,那么点击"Backspace"键的时候,网页会回退(倒退到上一个网页),这样就会就有一个问题,当我在一个输入框进行输入的 ...

  3. 禁止backspace键(退格键),但输入文本框时不禁止(兼容IE)

    Ext实现方式: Ext.getDoc().on('keydown',function(e){      if(e.getKey() == 8 && e.getTarget().typ ...

  4. 【VUE/JS】vue和js禁止浏览器页面后退

    1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ho ...

  5. js禁止浏览器页面后退功能

    js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...

  6. 利用js实现禁用浏览器后退

    原博主链接为:http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免 ...

  7. 利用js实现 禁用浏览器后退

    现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.        所以在有些页面上,适当的禁用浏览器的后退, ...

  8. 利用js实现 禁用浏览器后退 浏览器返回

    现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.        所以在有些页面上,适当的禁用浏览器的后退, ...

  9. [转] 利用js实现 禁用浏览器后退

    [From] http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免 ...

随机推荐

  1. django--主要部分

    django URL  URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个U ...

  2. oracle 函数调用

    --带out的函数 create or replace function fun_try(v_name varchar,v_outname out varchar)return varchar2 is ...

  3. Linux服务器上监控网络带宽的18个常用命令

    [51CTO精选译文]本文介绍了一些可以用来监控网络使用情况的Linux命令行工具.这些工具可以监控通过网络接口传输的数据,并测量目前哪些数据所传输的速度.入站流量和出站流量分开来显示. 一些命令可以 ...

  4. java编程题

    第一题:输入字符串长度len1,字符串s1,字符串长度len2,字符串s2.从后向前比较,以最短字符串为标准,输出不同的元素的个数. 例如:    输入:s1="1,3,5"   ...

  5. css加载优化

    <head> <script> // https://github.com/filamentgroup/loadCSS !function(e){"use stric ...

  6. ubuntu14.04下安装python3.4.2

    1. python安装包的下载地址:https://www.python.org/downloads/ 我的python安装包下载地址:https://www.python.org/ftp/pytho ...

  7. chrome浏览器调试typescript

    在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置javascript源码和生成代码的关系. 如果能在浏览器中直接调试typescript代码,才能让我们真正体会到typ ...

  8. Leetcode: Sentence Screen Fitting

    Given a rows x cols screen and a sentence represented by a list of words, find how many times the gi ...

  9. hibernate 多表查询

    Hibernate主要支持两种查询方式:HQL查询和Criteria查询.前者应用较为广发,后者也只是调用封装好的接口. 现在有一个问题,就是实现多表连接查询,且查询结果集不与任何一个实体类对应,怎么 ...

  10. echarts 用marlkline画线 同时配置中含有datazoom,怎么设置markline

    由于项目需要设置边界值即用markline 画标线,通过echarts文档可以查看到(如下) 1.通过坐标点(xAxis和yAxis的设置) 通过网上搜索许多markline的配置都是通过下面来设置的 ...