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

相关推荐
军训猫猫头4 分钟前
3.检查函数 if (!CheckStart()) return 的妙用 C#例子
开发语言·c#
coding随想5 分钟前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt
灵哎惹,凌沃敏6 分钟前
C语言/Keil的register修饰符
c语言·开发语言
LuckyLay13 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu16831 分钟前
aksk前端签名实现
java·前端·javascript
Azxcc036 分钟前
C++迭代器失效
开发语言·c++
烛阴37 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw042 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js