美文网首页
js禁用回退键[backspace键]浏览历史跳转的解决办法

js禁用回退键[backspace键]浏览历史跳转的解决办法

作者: easonR | 来源:发表于2019-05-13 11:17 被阅读0次

    转自:### js禁用回退键[backspace键]浏览历史跳转的解决办法

    解决办法:

    第一直觉就是上网搜答案,但是结果不理想。

    第二上论坛上看看有没有解决办法,到是找到一个类似的问你

    ‘在IE里按backspace键时如何知道是发生在input还是在中文输入法框?’

    地址:http://www.iteye.com/problems/3272

    问题类似,但是不是解决办法,还好的就是我根据他的思路自己试着找解决办法。

    多谢fuwang

    下面是我代码:

    Javascript代码

    1.  window.onload=function(){  
    2.  /**************************** 
    3.  * 作者:q821424508@sina.com   * 
    4.  * 时间:2012-07-12            * 
    5.  * version:1.0              * 
    6.  *                          * 
    7.  ****************************/  
    8.  document.getElementsByTagName("body")[0].onkeydown =function(){  
    9.  if(event.keyCode==8){  
    10.  var elem = event.srcElement;  
    11.  var name = elem.nodeName;  
    
    13.  if(name!='INPUT' && name!='TEXTAREA'){  
    14.  event.returnValue = false ;  
    15.  return ;  
    16.  }  
    17.  var type_e = elem.type.toUpperCase();  
    18.  if(name=='INPUT' && (type_e!='TEXT' && type_e!='TEXTAREA' && type_e!='PASSWORD' && type_e!='FILE')){  
    19.  event.returnValue = false ;  
    20.  return ;  
    21.  }  
    22.  if(name=='INPUT' && (elem.readOnly==true || elem.disabled ==true)){  
    23.  event.returnValue = false ;  
    24.  return ;  
    25.  }  
    26.  }  
    27.  }  
    28.  }  
    

    问题解决了,

    使用说明:

    1.把代码直接复制到页面,【页面必须含有body标签】

    2.放到任意一个页面引用的js文件中【直接放到文件的最开始,或最后,不要放到方法里面,页面必须含有body标签】

    以上为1.0版本,只支持IE:

    -------------------------------------------------------分割线------------------------------------------------------------

    以下为2.0版本,支持IE,firefox,chrome[这三款浏览器经过测试]等浏览器

    [图片上传失败...(image-15568f-1557717300381)]

    (又修复了个不大不小的bug,现在是2.1)

    Js代码

    1.  window.onload=function(){  
    2.  /**************************** 
    3.  * 作者:q821424508@sina.com   * 
    4.  * 时间:2012-08-20            * 
    5.  * version:2.1              * 
    6.  *                          * 
    7.  ****************************/  
    8.  document.getElementsByTagName("body")[0].onkeydown =function(){  
    
    10.  //获取事件对象  
    11.  var elem = event.relatedTarget || event.srcElement || event.target ||event.currentTarget;   
    
    13.  if(event.keyCode==8){//判断按键为backSpace键  
    
    15.  //获取按键按下时光标做指向的element  
    16.  var elem = event.srcElement || event.currentTarget;   
    
    18.  //判断是否需要阻止按下键盘的事件默认传递  
    19.  var name = elem.nodeName;  
    
    21.  if(name!='INPUT' && name!='TEXTAREA'){  
    22.  return _stopIt(event);  
    23.  }  
    24.  var type_e = elem.type.toUpperCase();  
    25.  if(name=='INPUT' && (type_e!='TEXT' && type_e!='TEXTAREA' && type_e!='PASSWORD' && type_e!='FILE')){  
    26.  return _stopIt(event);  
    27.  }  
    28.  if(name=='INPUT' && (elem.readOnly==true || elem.disabled ==true)){  
    29.  return _stopIt(event);  
    30.  }  
    31.  }  
    32.  }  
    33.  }  
    34.  function _stopIt(e){  
    35.  if(e.returnValue){  
    36.  e.returnValue = false ;  
    37.  }  
    38.  if(e.preventDefault ){  
    39.  e.preventDefault();  
    40.  }                 
    
    42.  return false;  
    43.  }  
    

    欢迎拍砖。

    欢迎在自己的项目中使用,复制,传播,都可以,不过请注明出处。


    版本升级:

    当前版本 2.1

    修复firefox下无法删除input里面字符的bug

    说明:

    不知道为毛,在firefox下出现问题了,之前确定测试过,然后有一个童鞋说这个脚本在firefox下不能用,会出现上面所说现象,我说我调试下,但是后来他说又可以了,

    不过经过我的测试这段脚本确实有问题,

    确实会出现上述问题,不过是时有时无。

    算了还是改一下吧,

    出现问题的原因:

    firefox下 var elem = event.relatedTarget || event.srcElement 无法获取到目标对象。

    所以换成target属性来获取。

    相关文章

      网友评论

          本文标题:js禁用回退键[backspace键]浏览历史跳转的解决办法

          本文链接:https://www.haomeiwen.com/subject/mmhlaqtx.html