zoukankan      html  css  js  c++  java
  • JS禁用浏览器退格键实现思路及代码

    [From] http://www.jb51.net/article/42562.htm


    上周提交了一个项目(内部使用的),一同事提出个BUG,说要禁用退格键(backspace或者叫后退键),因为这和他的习惯不一样,担心万一文字录入一半,他按了退格键,那整个页面的内容就白填了,然后信誓旦旦的说他做的系统中后退键都是不能用的,我这个系统有问题,当时因为事多,只把这个问题记录下来了,后来查了下他以前做的项目,也没有对退格键进行处理。自己的项目都没处理,到我这嚷嚷来了,算了,不和年轻人一般见识。不就禁用个后退键,简单。

    其实说禁用也不是完全禁用,后退键在各浏览器下默认为点击了一下后退按钮,只要保证正常的文字录入还可以用,其他情况下的退格键一律禁掉。看代码吧。

    当键盘敲下后退键(Backspace)后 
    1、禁止浏览器自动后退 
    2、但不影响密码、单行文本、多行文本输入框等的回退操作

    解决方案:

    网上搜了一下,发现有不少解决方案,相比较之下,zywang的方案较佳

    在其基础上,进行补充和完善,以满足需求,整理后的代码如下:

    代码一、核心代码

    function forbidBackSpace(e) { 
    var ev = e || window.event; //获取event对象 
    var obj = ev.target || ev.srcElement; //获取事件源 
    var t = obj.type || obj.getAttribute('type'); //获取事件源类型 
    //获取作为判断条件的事件类型 
    var vReadOnly = obj.readOnly; 
    var vDisabled = obj.disabled; 
    //处理undefined值情况 
    vReadOnly = (vReadOnly == undefined) ? false : vReadOnly; 
    vDisabled = (vDisabled == undefined) ? true : vDisabled; 
    //当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
    //并且readOnly属性为true或disabled属性为true的,则退格键失效 
    var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true); 
    //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
    var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea"; 
    //判断 
    if (flag2 || flag1) return false; 
    } 
    //禁止后退键 作用于Firefox、Opera 
    // document.onkeypress = forbidBackSpace; 
    //禁止后退键 作用于IE、Chrome 
    document.onkeydown = forbidBackSpace;


    代码二、

    function bindBackEvent() { //防止退格键
       $(document).keydown(function(e){
           e = window.event || e;
           var code = e.keyCode || e.which;
           if (code == 8) {
               var src = e.srcElement || e.target;
               var tag = src.tagName;
               if (tag != "INPUT" && tag != "TEXTAREA") {
                   e.returnValue = false; 
                   return false;
               } else if ((tag == "INPUT" || tag == "TEXTAREA") && src.readOnly == true) {
                   e.returnValue = false;
                   return false; 
               }
           }
       });
    }




  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 校门外的树
    Java实现 蓝桥杯VIP 算法训练 统计单词个数
    Java实现 蓝桥杯VIP 算法训练 统计单词个数
    Java实现 蓝桥杯VIP 算法训练 开心的金明
    Java实现 蓝桥杯VIP 算法训练 开心的金明
    Java实现 蓝桥杯 算法训练 纪念品分组
    Java实现 蓝桥杯 算法训练 纪念品分组
    Java实现 蓝桥杯VIP 算法训练 校门外的树
    Java实现 蓝桥杯VIP 算法训练 统计单词个数
    Java实现 蓝桥杯VIP 算法训练 开心的金明
  • 原文地址:https://www.cnblogs.com/pekkle/p/6568657.html
Copyright © 2011-2022 走看看