【前端】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 键在非输入区域时触发页面后退,同时保留在输入框或可编辑区域内的正常行为。如果有特殊场景,可以进一步自定义逻辑。

相关推荐
张晓~183399481216 分钟前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周8 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021111 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅15 分钟前
介绍electron
前端·javascript·electron
周胡杰17 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691318 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑20 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7735 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
纨妙38 分钟前
python打卡day59
开发语言·python
轻语呢喃39 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc