zoukankan      html  css  js  c++  java
  • js禁止Backspace键使浏览器后退

    在项目中遇到按下Backspace键让浏览器后退的问题,上网搜了几种解决方案都不太理想。于是集众人之智,采众家之长,归纳如下:

    这里主要参考博客http://q821424508.iteye.com/blog/1587025

    1、在公用js中定义阻止Backspace的方法

     1 function banBackSpace(e){
     2   var ev = e || window.event;
     3   //各种浏览器下获取事件对象
     4   var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget;
     5   //按下Backspace键
     6   if(ev.keyCode == 8){
     7     var tagName = obj.nodeName //标签名称
     8     //如果标签不是input或者textarea则阻止Backspace
     9     if(tagName!='INPUT' && tagName!='TEXTAREA'){
    10       return stopIt(ev);
    11     }
    12     var tagType = obj.type.toUpperCase();//标签类型
    13     //input标签除了下面几种类型,全部阻止Backspace
    14     if(tagName=='INPUT' && (tagType!='TEXT' && tagType!='TEXTAREA' && tagType!='PASSWORD')){
    15       return stopIt(ev);
    16     }
    17     //input或者textarea输入框如果不可编辑则阻止Backspace
    18     if((tagName=='INPUT' || tagName=='TEXTAREA') && (obj.readOnly==true || obj.disabled ==true)){
    19       return stopIt(ev);
    20     }
    21   }
    22 }
    23 function stopIt(ev){
    24   if(ev.preventDefault ){
    25     //preventDefault()方法阻止元素发生默认的行为
    26     ev.preventDefault();
    27   }
    28   if(ev.returnValue){
    29     //IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
    30     ev.returnValue = false;
    31   }
    32   return false;
    33 }

    方法注释写的很清晰了,这里不过多解释。

    2、页面加载完成就调用该方法

    1 $(function(){
    2   //实现对字符码的截获,keypress中屏蔽了这些功能按键
    3   document.onkeypress = banBackSpace;
    4   //对功能按键的获取
    5   document.onkeydown = banBackSpace;
    6 })

    注:  按键事件触发顺序: keydown -> keypress ->textInput -> keyup

    存在问题:select下拉列表展开后,无法获取键盘事件,此时按Backspace键,浏览器还是会回退到历史;解决办法:将select下拉框改为easyUI的combobox;

    哪位大神有更好的解决办法请留言告知

  • 相关阅读:
    浅析电商防止恶意下单
    Dubbo与Hadoop RPC的区别
    中秋福利 | 10本技术图书(编程语言、数据分析等)免费送
    IOS渠道追踪方式
    数据迁移的应用场景与解决方案Hamal
    JVM锁实现探究2:synchronized深探
    网页设计简史看设计&代码“隔膜”
    知物由学 | 你真的了解网络安全吗?
    一行代码搞定Dubbo接口调用
    测试周期内测试进度报告规范
  • 原文地址:https://www.cnblogs.com/lujiulong/p/6019638.html
Copyright © 2011-2022 走看看