在项目中遇到按下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. NodeJs并发异步的回调处理

    这里说并发异步,并不准确,应该说连续异步.NodeJs单线程异步的特性,直接导致多个异步同时进行时,无法确定最后的执行结果来回调.举个简单的例子: for(var i = 0; i < 5; i ...

  2. 设置默认访问项目的客户端的浏览器版本(IE版本)

    在项目开发部署中,发现浏览器不兼容现象,在不处理兼容性情况下让用户更好体验(IE浏览器) 我们来设置客户端默认访问项目的浏览器版本 如下所示的是不同IE版本下的效果截图比较: IE5.IE6下: IE ...

  3. 网络服务器之HTTPS服务

    import ssl, socket, time if __name__ == "__main__": context = ssl.SSLContext(ssl.PROTOCOL_ ...

  4. C#中Object和Json之间的转换

    //创建一个类,此类有两个方法 using Newtonsoft.Json;namespace System{    public static class JsonExtension    {    ...

  5. 弱网测试IOS

    IOS测弱网非常方便,在设置-开发者-NETWORK LINK CONDITIONER的Status 进入后可以看到IOS自带了100%LOSS.3G.WiFi等常见场景 可以点击图标i进行查看或编辑 ...

  6. SQL Server 常用日期查询语句

    --本月月初select  dateadd(mm,datediff(mm,0,getdate()),0) --本月月末select  DATEADD(DD,-1,DATEADD(MONTH,1+DAT ...

  7. LeetCode Reverse Vowels of a String

    原题链接在这里:https://leetcode.com/problems/reverse-vowels-of-a-string/ 题目: Write a function that takes a ...

  8. Git 常见的一些小命令

        Git 常见的一些命令 关于一些参数比较多,比较复杂的都有单独进行介绍         1. git cherry-pick 挑拣命令,当我们不想合并分支,或者git pull 更新仓库,而是 ...

  9. lua table integer index 特性

    table.maxn (table) Returns the largest positive numerical index of the given table, or zero if the t ...

  10. working with fitnesse wiki pages

    fitnesse提供一个简单易用的wiki创建一个web页面用于测试.测试页面有一个button,允许所有的测试在这个页面运行,因此任何人在任何时间都可以去这个页面点击这个按钮,查看测试是否通过.fi ...