Vue3 + TypeScript全局阻止非输入区域的Backspace键，防止回退页面

main.ts

/*** 应用程序主入口** 初始化 Vue 应用并挂载到 DOM*/
import "./assets/style/main.scss";import { createApp } from "vue";
// 全局引入element-plus，对打包后的文件大小不是很在乎，那么使用全局导入会更方便
import ElementPlus from "element-plus";
// 全局引入element-plus的样式
import "element-plus/dist/index.css";
// 引入element-plus国际语言的中文，element-plus国际语言默认为英文
// import locale from 'element-plus/dist/locale/zh-cn.js' // 引入这个组件，还需额外处理无法找到模块的报错
import locale from "element-plus/es/locale/lang/zh-cn"; // 引入这个组件更简单
// 全局引入自定义样式，全局更改element-plus的文本颜色（通过样式覆盖，覆盖上面全局引入element-plus的样式中的文本颜色）
import "@/assets/style/element-plus-text-color.scss";
import router from "@/router";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// 在env.d.ts文件中添加 declare module "vue3-print-nb";解决【无法找到模块“vue3-print-nb”的声明文件】的报错
import print from "vue3-print-nb";
import App from "./App.vue";
// 引入全局样式
import "@/assets/style/variables.scss";
import "@/assets/style/global.scss";
// 全局引入自定义的物资管理系统样式
import "@/assets/style/global-warehouse.scss";const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(ElementPlus, { locale });
app.use(router);
app.use(pinia);
app.use(print);// 全局阻止非输入区域的Backspace键，防止回退页面
document.addEventListener("keydown", (e) => {if (e.key === "Backspace") {const activeElement = document.activeElement as HTMLElement;const isEditable =activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable;// 非输入区域按下Backspace时阻止默认行为if (!isEditable) {e.preventDefault();// 可选：提示用户（根据需求决定是否添加）console.warn("Backspace键在非输入区域已被禁用，防止回退页面。");}}
});app.mount("#app");// 项目安装开发依赖 dependencies
// element-plus:                npm install element-plus --save
// vue-router:                  npm install vue-router@4
// axios:                       npm install axios
// pinia:                       npm install pinia
// pinia-plugin-persistedstate: npm i pinia-plugin-persistedstate
// mitt:                        npm i mitt
// vue3-print-nb:               npm install vue3-print-nb --save
// xlsx:                        npm install xlsx // xlsx是一个优秀的表格处理库，是一款适用于浏览器和nodejs的开源电子表格解析库
// 安装xlsx的TypeScript类型声明  npm install @types/xlsx -D
// dayjs                        npm install dayjs // dayjs是一个轻量级的JavaScript时间日期库
// vite-plugin-vue-setup-extend npm i vite-plugin-vue-setup-extend -D //扩展Vue SFC的编译逻辑，允许在<script setup>标签上添加name属性，设置组件名称
// crypto-js                    npm install crypto-js // crypto-js是一个开源的JavaScript加密库
// 安装crypto-js官方类型声明文件  npm i --save-dev @types/crypto-js
// accounting                   npm install accounting // accounting.js 是一个用于格式化数字、货币和金额的轻量级库，特别适合财务和会计应用。
// 安装accounting官方类型声明文件 npm install --save-dev @types/accounting
// lodash-es                    npm install lodash-es // lodash-es 是一个一致性、模块化、高性能的 JavaScript 实用工具库// scss:                        npm i sass sass-loader --save-dev// 安装Vue文档生成工具 VueDocGen npm install -D vue-docgen-api vue-docgen-cli
// 安装Vue文档生成工具 TypeDoc   npm install -D typedoc
// 安装typedoc-plugin-markdown  npm install -D typedoc-plugin-markdown
// 安装typedoc-plugin-vue       npm install -D typedoc-plugin-vue
// 安装typedoc-plugin-missing-exports npm install -D typedoc-plugin-missing-exports
// 安装typedoc-vitepress-theme  npm install -D typedoc-vitepress-theme
// 安装vitepress                npm install -D vitepress

在 Vue3 的 main.ts中实现全局事件监听以阻止非输入区域的 Backspace 键触发页面回退，可以通过以下步骤实现：

---

​​方法：全局事件监听​​

在 main.ts中添加以下代码，监听 keydown事件并判断 Backspace 键是否在非输入区域触发：

typescript

复制

import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 全局阻止非输入区域的Backspace键 document.addEventListener('keydown', (e) => { if (e.key === 'Backspace') { const activeElement = document.activeElement as HTMLElement; const isEditable = activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable; // 非输入区域按下Backspace时阻止默认行为 if (!isEditable) { e.preventDefault(); // 可选：提示用户（根据需求决定是否添加） console.warn('Backspace键在非输入区域已被禁用'); } } }); app.mount('#app');

---

​​关键点解析​​

1. 1.

   ​​事件监听范围​​

   • •

     通过 document.addEventListener全局监听 keydown事件，覆盖整个应用。

   • •

     使用 e.key === 'Backspace'明确判断 Backspace 键（兼容性更好，优于 keyCode）

     1

     6

     。
2. 2.

   ​​输入区域检测​​

   • •

     检查当前焦点元素 (document.activeElement) 是否为可编辑元素（input、textarea或 contentEditable属性为 true的元素）

     1

     6

     。
   • •

     若不在可编辑区域，则调用 e.preventDefault()阻止默认回退行为。

3. 3.

   ​​注意事项​​

   • •

     ​​性能优化​​：无需手动移除监听器，因为 main.ts是应用入口，监听器会随页面生命周期持续生效。

   • •

     ​​用户体验​​：可根据需求添加提示（如 alert或 console.log），但需谨慎避免频繁干扰用户

     6

     。

---

​​替代方案：自定义全局指令​​

若需更灵活的局部控制，可在 main.ts中注册一个全局指令：

typescript

复制

app.directive('prevent-backspace', { mounted(el) { el.addEventListener('keydown', (e) => { if (e.key === 'Backspace') { const target = e.target as HTMLElement; if (!['INPUT', 'TEXTAREA'].includes(target.tagName) && !target.isContentEditable) { e.preventDefault(); } } }); } });

​​使用方式​​：在组件模板中添加 v-prevent-backspace指令即可局部生效

1

6

。

---

​​总结​​

• •

  ​​推荐方案​​：直接在 main.ts中添加全局事件监听，简单高效。

• •

  ​​扩展性​​：如需动态控制，可结合路由守卫（router.beforeEach）或状态管理（如 pinia）进一步定制逻辑

  3

  7

  。
• •

  ​​兼容性​​：确保测试不同浏览器（尤其是旧版本）的键盘事件行为。

在 Vue3 中防止 Backspace 键触发页面回退，可以通过以下几种方法实现，涵盖全局监听、路由守卫和自定义指令等方式：

---

1. ​​全局事件监听（阻止非输入区域的 Backspace 键）​​

在 main.js或组件的 mounted钩子中监听 keydown事件，判断是否为 Backspace 键（key === 'Backspace'），并检查当前焦点是否在可编辑元素（如输入框）外。若不在输入区域，则阻止默认行为：

javascript

下载

复制

运行

document.addEventListener('keydown', (e) => { if (e.key === 'Backspace') { const isEditable = document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' || document.activeElement.isContentEditable; if (!isEditable) { e.preventDefault(); alert('当前页面禁止后退'); // 可选提示 } } });

​​优点​​：简单直接，适用于全局拦截。

​​注意​​：需在组件销毁时移除监听（onUnmounted钩子）以避免内存泄漏

2

4

。

---

2. ​​自定义 Vue 指令​​

封装一个指令 v-prevent-backspace，仅在特定组件内生效：

javascript

下载

复制

运行

// 注册指令 app.directive('prevent-backspace', { mounted(el) { el.addEventListener('keydown', (e) => { if (e.key === 'Backspace') { const target = e.target; if (!['INPUT', 'TEXTAREA'].includes(target.tagName) && !target.isContentEditable) { e.preventDefault(); } } }); } }); // 使用指令 <template> <div v-prevent-backspace>仅在此div内禁止Backspace回退</div> </template>

​​适用场景​​：需要局部控制的组件

2

。

---

3. ​​路由守卫结合 History API​​

通过 router.beforeEach或 beforeRouteLeave守卫拦截导航，并配合 history.pushState修改浏览器历史记录：

javascript

下载

复制

运行

// 方法1：全局路由守卫 router.beforeEach((to, from, next) => { if (from.path === '/protected' && !confirm('确定离开？')) { next(false); // 取消导航 } else { next(); } }); // 方法2：组件内使用History API onMounted(() => { window.history.pushState(null, null, window.location.href); window.addEventListener('popstate', () => { window.history.pushState(null, null, window.location.href); }); });

​​效果​​：完全阻止后退操作，但需注意用户体验（如提示确认）

1

5

6

。

---

4. ​​动态控制后退行为​​

通过 ref管理状态，灵活启用/禁用后退拦截：

javascript

下载

复制

运行

import { ref, onBeforeUnmount } from 'vue'; const isBackDisabled = ref(false); const disableBack = () => { window.history.pushState(null, '', window.location.href); isBackDisabled.value = true; window.addEventListener('popstate', handlePopstate); }; const handlePopstate = () => { if (isBackDisabled.value) { window.history.pushState(null, '', window.location.href); } }; onBeforeUnmount(() => { window.removeEventListener('popstate', handlePopstate); });

​​优势​​：可动态恢复后退功能（设置 isBackDisabled.value = false）

4

。

---

总结建议

• •

  ​​全局拦截​​：优先使用 ​​方法1​​ 或 ​​方法3​​ 的路由守卫。

• •

  ​​局部控制​​：选择 ​​方法2​​ 的自定义指令。

• •

  ​​强限制场景​​：结合 ​​History API​​（如方法3或方法4）彻底禁用后退，但需谨慎避免用户体验问题。

如需更详细实现，可参考相关文档或社区示例