文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript如何防止页面退格键回退

2023-05-19 11:54

关注

在一个网页中,当我们在输入框内输入文字或者进行密码输入时,我们并不希望用户通过按下退格键来操作历史记录和回退到上一个页面。因此,我们往往需要编写代码来阻止这个默认行为。本文将介绍如何使用JS来实现这个过程,并展示此方法可以在不同的场景下调用。

什么是退格键

最初的Unix终端是Teletype ASR33,由纸带穿孔机以及纸带阅读机和键盘组成。Backspace和Delete并不属于该键盘上的按键

在键入内容的时候如果出错,则需要按下^(ctrl)+H向teletype发送一个退格命令,使得穿孔机移回之前的位置,然后按下Rubout键再发送一个删除命令才能做到删除对应位置内容

之后为了方便开始制造带有backspace按键的终端,同时完成退格和删除两个功能

后来Rubout键被改名为Delete,一些Unix公司决定在键盘中加入Delete键(用于删除一个字符),这些公司决定用Delete代替^+H代表退格。因此,情况变成了一些键盘可以按下Backspace删除字符,另一些要按下Delete。

对于现在的键盘来讲,实际情况是有Backspace键时按下后则会触发退格加删除两个操作,此时的Delete键的作用只对应删除这一个操作,因此Backspace键删除的都是光标之前的字符,Delete键删除的是光标之后的字符;如果没有Backspace键则用Delete键来代替(也是退格加删除两个操作)。

思路概述

首先,通过键盘事件检查用户的按键,判断对于的键是否是“退格键”。如果是,则阻止默认行为,即不允许回退。该过程可以分为以下几步:

具体实现

document.onkeydown = function(event) {
  var e = event || window.event;
  var keyCode = e.keyCode || e.which;
  // 判断是否为退格键
  if (keyCode == 8) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  }
}

以上代码展示了具体实现过程。其中,我们通过keyCodewhich获取当前键位,使用if语句判断是否为退格键(退格键的keycode为8),如果是则执行preventDefault()阻止默认行为,否则放行。

兼容性

该方法与不同的浏览器兼容性良好。以上代码中处理退格键的keyCode属性已被所有现代浏览器所支持,同时也被IE等老旧浏览器所支持。

但是,为了保证屏幕能够实时响应用户的操作,我们还应该考虑到一些其他因素。例如:

处理焦点问题

因为我们只想阻止用户在当前输入框输入时使用退格键进行“回退”操作,因此如果用户焦点不在一个输入框内(例如按下Tab键)而按下退格键,我们可以不做任何处理。下面展示了如何根据焦点状态来判断是否进行回退处理。(在本例中,我们选择使用jQuery库)

$(document).on('keydown', function (event) {
  if (event.keyCode == 8) {
    var doPrevent = false;
    var target = event.target;
    if (target.isContentEditable || 
      (target.nodeName.toLowerCase() == 'input' && 
        (target.type.toLowerCase() == 'text' || target.type.toLowerCase() == 'password' || target.type.toLowerCase() == 'email'))) {
      // 在输入框或可编辑区域
      doPrevent = false;
    } else {
      doPrevent = true;
    }
    if (doPrevent) {
      event.preventDefault();
    }
  }
});

处理history.back()问题

如果用户使用退格键作为history.back()方法的替代品,那么我们需要捕获该事件并进行处理。在这种情况下,我们不应该阻止跳转,而是在回退前弹出一个警告框,让用户来确认是否想要撤销操作。

$(document).on("keydown", function(event) {
    var doPrevent = false;
    if ((event.ctrlKey || event.metaKey) && (event.keyCode == 78 || event.keyCode == 82)) {
        doPrevent = true;
    }
    if (event.keyCode == 8) {
        var target = event.target;
        if (target.isContentEditable || 
          (target.nodeName.toLowerCase() == 'input' && 
            (target.type.toLowerCase() == 'text' || target.type.toLowerCase() == 'password' || target.type.toLowerCase() == 'email'))) {
            // 在输入框或可编辑区域
            doPrevent = false;
        } else {
            doPrevent = true;
        }
    }
    if (doPrevent) {
        event.preventDefault();
        window.history.back();
        if (typeof window.history.back.callback === "function") {
            window.history.back.callback();
        } else {
            window.history.back.callStack = window.history.back.callStack || [];
            window.history.back.callStack.push(window.history.back);
        }
        setTimeout(function() {
            var r = confirm("确认要现在离开该页面吗?");
            if (r == true) {
                window.location = "/logout";
            } else {
                window.history.forward();
                if (window.history.back.callStack.length > 0) {
                    var c = window.history.back.callStack.pop();
                    c();
                }
            }
        }, 100);
        return true;
    }
});

如上代码所示,我们将用户的操作记录压入一个callStack数组中,并弹出确认框来防止过快跳转影响用户体验。如果用户选择“确认”,则返回到主页并进行相关处理;否则,程序将在call stack数组中找到最有一个未执行的回调函数,再次执行。

在 Vue 中使用

方案一:自定义指令

Vue v-on 指令支持警告修饰符 .prevent 来停止事件冒泡并防止热键。我们可以创建一个自定义指令来触发该修饰符。

main.js 文件中注册指令:

Vue.directive('prevent-back', {
  bind: function (el, binding, vnode) {
    var handler = function (event) {
      if (event.keyCode === 8) {
        event.preventDefault();
        vnode.elm.dispatchEvent(new Event('input'));
      }
    };
    el.addEventListener('keydown', handler);
    el.addEventListener('blur', function() {
      el.removeEventListener('keydown', handler);
    });
  }
});

在模板中使用自定义指令:

<template>
  <div>
    <input type="text" v-prevent-back />
  </div>
</template>

方案二:Vue Mixin

Vue Mixin 可以让我们在组件中混入同样的数据和方法,从而复用代码。我们可以创建一个全局的 Mixin,在需要阻止回退键的组件中混入该 Mixin。

main.js 文件中定义 Mixin:

Vue.mixin({
  methods: {
    preventBackspace: function(event) {
      if (event.keyCode === 8) {
        event.preventDefault();
      }
    },
    addKeyListener: function() {
      window.addEventListener('keydown', this.preventBackspace, true);
    },
    removeKeyListener: function() {
      window.removeEventListener('keydown', this.preventBackspace, true);
    }
  }
})

在组件中混入 Mixin:

import Vue from 'vue';
export default {
  mixins: [Vue.mixin],
  mounted() {
    this.addKeyListener();
  },
  destroyed() {
    this.removeKeyListener();
  }
}

总结

本文详细介绍了如何实现屏蔽页面退格键回退的方法。同时,我们讨论了如何在不同环境下确保其兼容性和正确性。通过使用jQuery库和一些看似简单但微不足道的技巧,我们成功地在几个关键点上解决了各种问题。我相信读完这篇文章后,你已经能够轻松地在其他网站上使用此方法并应用到自己的项目中去啦!

到此这篇关于JavaScript如何防止页面退格键回退的文章就介绍到这了,更多相关JavaScript防止退格键回退内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯