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

本文链接：https://blog.csdn.net/ks8380/article/details/107569317

本文介绍了一种在Web应用中防止Backspace键误触发浏览器后退行为的方法，通过JavaScript监听键盘事件，智能判断并阻止在非输入框区域按下的Backspace键，有效提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建文件 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则阻止Backspace
    if (tagName !== 'input' && tagName !== 'textarea') {
      return stopIt(ev)
    }
    let tagType = obj.type.toLowerCase() // 标签类型
    // input标签除了下面几种类型，全部阻止Backspace
    if (tagName === 'input' && (tagType !== 'text' && tagType !== 'textarea' && tagType !== 'password')) {
      return stopIt(ev)
    }
    // input或者textarea输入框如果不可编辑则阻止Backspace
    if ((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 = stopBackSpace
   document.onkeydown = stopBackSpace
}