谷歌网站怎么打不开,广州市番禺区住房和建设局网站,外贸小网站建设,wordpress源码整站【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法 方法一#xff1a;通过全局事件监听阻止 Backspace 导致页面后退
在 main.js 或组件的 mounted 中添加以下代码#xff1a;
//【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
document.addEventListener…
【前端】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 键在非输入区域时触发页面后退同时保留在输入框或可编辑区域内的正常行为。如果有特殊场景可以进一步自定义逻辑。
