欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-08 11:14:56
在项目中遇到按下backspace键让浏览器后退的问题,上网搜了几种解决方案都不太理想。于是集众人之智,采众家之长,归纳如下: 1、在公用js中定义阻止backspace...

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