当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js禁止Backspace键使浏览器后退的实现方法

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

在项目中遇到按下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键使浏览器后退的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网