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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
js转换对象为xml
2017/02/17 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
Python编写Windows Service服务程序
2018/01/04 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python实现俄罗斯方块
2018/06/26 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python 重命名轴索引的方法
2018/11/10 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
numpy.array 操作使用简单总结
2019/11/08 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Yahoo-PHP面试题3
2012/01/14 面试题
暑期实习鉴定
2013/12/16 职场文书
实习推荐信
2014/05/10 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记