美文网首页
vue中处理ie浏览器backspace回退问题

vue中处理ie浏览器backspace回退问题

作者: 小码农_影 | 来源:发表于2021-02-24 14:46 被阅读0次

    vue的index.html文件中添加 以下代码 可解决

     <script>
    
    // 兼容ie下 backspace回退问题
    
    //处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外
    
    function banBackSpace(e){
    
        var ev = e || window.event;//获取event对象
    
        var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget;//获取事件源
    
        var t = obj.type || obj.getAttribute('type');//获取事件源类型
    
        //获取作为判断条件的事件类型
    
        var vReadOnly = obj.getAttribute('readonly');
    
        //处理null值情况
        vReadOnly = (vReadOnly == "") ? false : vReadOnly;
    
        //当敲Backspace键时,事件源类型为密码或单行、多行文本的,
    
        //并且readonly属性为true或enabled属性为false的,则退格键失效
    
        var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") && vReadOnly=="readonly")?true:false;
    
        //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
    
         var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") ?true:false;
    
        //判断
        if(flag2){
            return false;
        }
        if(flag1){
            return false;
        }
    }
    
    window.onload=function(){
        //禁止后退键 作用于Firefox、Opera
        document.onkeypress=banBackSpace;
        //禁止后退键  作用于IE、Chrome
        document.onkeydown=banBackSpace;
    }
    
    </script>

    相关文章

      网友评论

          本文标题:vue中处理ie浏览器backspace回退问题

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