【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法

【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法

方法一：通过全局事件监听阻止 Backspace 导致页面后退

在 main.js 或组件的 mounted 中添加以下代码：

//【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
document.addEventListener('DOMContentLoaded', function () {document.body.addEventListener('keydown', function (e) {// 检查是否按下了Backspace键if (e.key === 'Backspace' || e.keyCode === 8) {// 如果焦点在一个可编辑的元素上（例如input或textarea），则允许Backspace键的操作const activeElement = document.activeElement;const isEditable = activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable;if (isEditable) {return; // 允许Backspace操作}else{// 阻止默认行为e.preventDefault();alert('不能后退')}}});
});

方法二：使用 Vue 指令

如果你想在特定组件范围内阻止 Backspace 导致页面后退，可以创建一个自定义指令：

javascript

复制代码

// 创建指令 Vue.directive('prevent-backspace', { bind(el) { el.addEventListener('keydown', (event) => { if (event.key === 'Backspace') { const target = event.target; const isInputElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA'; const isEditable = target.isContentEditable; if (!isInputElement && !isEditable) { event.preventDefault(); } } }); } }); // 使用指令 <template> <div v-prevent-backspace> <!-- 页面内容 --> </div> </template>

方法三：使用 Vue Router 的 beforeEach 钩子

如果项目中启用了 Vue Router，可以结合路由导航守卫：

javascript

复制代码

router.beforeEach((to, from, next) => { document.addEventListener('keydown', (event) => { if (event.key === 'Backspace') { const target = event.target; const isInputElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA'; const isEditable = target.isContentEditable; if (!isInputElement && !isEditable) { event.preventDefault(); } } }); next(); });

注意

以上代码会阻止 Backspace 键在非输入区域时触发页面后退，同时保留在输入框或可编辑区域内的正常行为。如果有特殊场景，可以进一步自定义逻辑。