当前位置: 代码迷 >> 综合 >> vue 关于ie浏览器下 按下 backspace 出现 页面回退的问题
  详细解决方案

vue 关于ie浏览器下 按下 backspace 出现 页面回退的问题

热度:72   发布时间:2024-01-31 22:28:35.0

新建文件   preventBackspace.js

export const stopBackSpace = (e) => {let ev = e || window.event// 各种浏览器下获取事件对象let obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget// 按下Backspace键if (ev.keyCode === 8) {// 标签名称let tagName = obj.nodeName.toLowerCase();// 如果标签不是input或者textarea则阻止Backspaceif (tagName !== 'input' && tagName !== 'textarea') {return stopIt(ev)}let tagType = obj.type.toLowerCase() // 标签类型// input标签除了下面几种类型,全部阻止Backspaceif (tagName === 'input' && (tagType !== 'text' && tagType !== 'textarea' && tagType !== 'password')) {return stopIt(ev)}// input或者textarea输入框如果不可编辑则阻止Backspaceif ((tagName === 'input' || tagName === 'textarea') && (obj.readOnly === true || obj.disabled === true)) {return stopIt(ev)}}
}function stopIt (ev) {if (ev.preventDefault) {// preventDefault()方法阻止元素发生默认的行为ev.preventDefault()}if (ev.returnValue) {// IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为// window.event.returnValue = false;}return false
}

在需要使用的vue页面进行引入    在mounted内使用

import {stopBackSpace} from '@/utils/preventBackspace'mounted(){// 兼容ie下 backspace回退问题document.onkeypress = stopBackSpacedocument.onkeydown = stopBackSpace
}