vue项目ie和360浏览器下backspace会返回上一页_vue backspace回到了上一页-CSDN博客

本文介绍了一种在网页中禁用Backspace键的方法，不影响密码框和其他文本输入区域的正常使用，通过JavaScript实现，适用于Vue项目。代码示例展示了如何在main.vue文件中引入并应用该功能。

摘要由CSDN通过智能技术生成

禁用backspace且不影响Text password textarea使用

新建preventBackspace.js


export function banBackSpace(e){   
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');
    //判断当前事件类型
    var vReadOnly = obj.getAttribute('readonly');   
    var vEnabled = obj.getAttribute('enabled');   
    //处理空值的情况   
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;   
    vEnabled = (vEnabled == null) ? true : vEnabled;    
    //当敲Backspace键时，事件源类型为密码或单行、多行文本的，   
    //并且readonly属性为true或enabled属性为false的，则退格键失效   
    //根据你的需求进行判断 这里我使用了layui date组件 所以vReadOnly判断是否为readonly
    var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")   
    && (vReadOnly=='readonly' || vEnabled!=true))?true:false;   
      
    //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效   
    var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")?true:false;   
      
    //判断   
    if(flag2){   
        return false;   
    }   
    if(flag1){   
        return false;   
    }   
}

然后在你的入口文件main.vue
引入 import {banBackSpace} from ‘…/…/libs/utils/preventBackspace’
生命周期mounted下添加

//onkeydown：键盘一按下就触发的事件，键盘上任意键都会触发onkeydown()事件。
//onkeypress：键盘一按下就触发的事件，同onkeydown（除去功能键，如：Esc,Shift,Ctrl..）

document.onkeypress=banBackSpace
document.onkeydown=banBackSpace