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


Posted in Javascript onSeptember 01, 2017

在项目中遇到按下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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
JavaScript中数组常见操作技巧
Sep 01 #Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 #Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 #Javascript
关于Promise 异步编程的实例讲解
Sep 01 #Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 #Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
详解使用angular的HttpClient搭配rxjs
Sep 01 #Javascript
You might like
php一些公用函数的集合
2008/03/27 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
JS实现分页导航效果
2020/02/19 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
使用Python读取大文件的方法
2018/02/11 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
行政助理的职责
2013/11/14 职场文书
大学生工作求职信
2014/06/23 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
一文搞懂Python Sklearn库使用
2021/08/23 Python