首页 > 代码库 > 阻止按下backspace键造成页面回退相像
阻止按下backspace键造成页面回退相像
在IE浏览器中,会出现当你使用鼠标选中input标签或者是textarea标签,或者啥也没选中的时候,按下backspace键会触发浏览器的回退。
针对以上问题的解决思路:
1. 当按下键盘时,判断当前按键是否为backspace
2. 如果是,获取当前光标选中的元素、
3. 如果不是input或者textarea,取消backspace的关联行为
4. 如果是,则判断是否为text,password等可编辑的文本框,如果不是,则取消默认行为(此处只需要判断input,不需要判断textarea)
5. 如果满足,继续判断是否为readonly或者disabled,如果是阻止默认行为
以下是代码实现,分为JS和jQuery两种,针对浏览器的适配,推荐使用jQuery版
1. JavaScript版:
1 /* 2 JS版 3 作用:阻止按下backspace键造成页面回退相像 4 */ 5 window.onload=function(){ 6 document.getElementsByTagName("body")[0].onkeydown =function(){ 7 /*获取事件对象 8 * event.relatedTarget IE不支持,fireFox不支持 9 * event.srcElement IE支持,fireFox不支持 10 * event.target IE,fireFox都支持 11 * event.currentTarget IE和fireFox都支持 12 */ 13 /*var elem = event.currentTarget || event.relatedTarget || event.target || event.target;*/ 14 15 if(event.keyCode==8){//判断按键为backSpace键 16 17 //获取事件 18 var elem = event.srcElement || event.currentTarget; 19 //判断是否需要阻止按下键盘的事件默认传递 20 var name = elem.nodeName; 21 // 如果name不为INPUT或者是TEXTAREA任意一个,就阻止该动作 22 if(name!=‘INPUT‘ && name!=‘TEXTAREA‘){ 23 return stopIt(event); 24 } 25 // 获取该元素的type属性值 26 var type_e = elem.type.toUpperCase(); 27 // 如果type属性不是text,textarea,password.file中的任意一个,则阻止该backspace操作 28 if(name==‘INPUT‘ && (type_e!=‘TEXT‘ && type_e!=‘TEXTAREA‘ && type_e!=‘PASSWORD‘ && type_e!=‘FILE‘)){ 29 return stopIt(event); 30 } 31 // 如果是个input,并且type也满足要求,继续判断是否是readonly或者是disabled不可编辑的文本框 32 // 如果是,则阻止该backspace操作 33 if(name==‘INPUT‘ && (elem.readOnly==true || elem.disabled ==true)){ 34 return stopIt(event); 35 } 36 } 37 } 38 } 39 function stopIt(e){ 40 // 如果设置了该属性,它的值比事件句柄的返回值优先级高。 41 // 把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。 42 if(e.returnValue){ 43 e.returnValue = http://www.mamicode.com/false ; 44 } 45 // 通知浏览器不要执行与该事件相关联的默认动作 46 if(e.preventDefault ){ 47 e.preventDefault(); 48 } 49 // 阻止浏览器执行相关动作 50 return false; 51 }
2. jQuery版:
1 /* 2 jQuery版 3 */ 4 $(function(){ 5 $("body").keydown(function(e){ 6 // 获取当前按键的Code 7 var keyCode = e.which; 8 // 当keyCode值为8是,为backspace按键被触发 9 if(keyCode == 8){ 10 // 获取按下backspace键时光标指向的元素 11 var elem = document.activeElement.tagName; 12 //判断elem是否为input或者是textarea 13 if(elem != "INPUT" && elem != "TEXTAREA"){ 14 // 阻止该操作 15 return stopIt(e); 16 } 17 // 如果elem为input或者是textarea,则判断type类型是否为text,textarea,password,file 18 var elemType = document.activeElement.type; 19 20 if(elemType != "text" && elemType != "textarea" && elemType!= "password" && elemType != "file"){ 21 return stopIt(e); 22 } 23 // 如果满足上述条件了,继续判断是否为readonly或者是disabled 24 //var dis = document.activeElement.getAttribute("disabled"); // 返回值为null或disabled 25 //var read = document.activeElement.getAttribute("readonly"); // 返回值为null或readonly 26 27 //var dis = document.activeElement.disabled; //返回值为false或true 28 //var read = document.activeElement.readOnly; // 返回值为false或true 29 30 if(document.activeElement.disabled || document.activeElement.readOnly){ 31 return stopIt(e); 32 } 33 } 34 }); 35 }); 36 function stopIt (e) { 37 // 如果设置了该属性,它的值比事件句柄的返回值优先级高。 38 // 把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。 39 if(e.returnValue){ 40 e.returnValue = http://www.mamicode.com/false ; 41 } 42 // 通知浏览器不要执行与该事件相关联的默认动作 43 if(e.preventDefault ){ 44 e.preventDefault(); 45 } 46 // 阻止浏览器执行相关动作 47 return false; 48 }
阻止按下backspace键造成页面回退相像
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。