js屏蔽退格键(backspace或者叫后退键与F5)

沃梦达教程前端开发

2024-03-01

下面是 JS 屏蔽退格键(backspace)和F5键的完整攻略，包含了两个示例说明：

下面是 JS 屏蔽退格键(backspace)和F5键的完整攻略，包含了两个示例说明：

如何屏蔽退格键和F5键

当用户在执行操作的时候，有时候不希望用户误操作将页面刷新或者回退，所以需要屏蔽一些按键，比如退格键和F5键。下面就来讲解具体的屏蔽方式。

屏蔽退格键(backspace)

document.onkeydown = function() {
  if (window.event.keyCode == 8) {
    return false;
  }
};

以上代码中，我们监听了 keydown 事件，并且判断了键值是否为 8，如果是，就不让它继续执行下去。这样就可以屏蔽退格键了。

屏蔽F5键

document.onkeydown = function() {
  if (window.event.keyCode == 116) {
    window.event.keyCode = 0;
    window.event.returnValue = false;
  }
};

以上代码也是监听了 keydown 事件，并且判断了键值是否为 116，如果是，就将 keyCode 设为 0，然后取消默认事件的执行。

示例说明

示例1

<html>
<head>
  <title>屏蔽退格键</title>
</head>
<body>
  <p>请尝试按退格键</p>
  <script>
    document.onkeydown = function () {
      if (window.event.keyCode == 8) {
        return false;
      }
    }
  </script>
</body>
</html>

以上是一个简单的示例，页面上只有一段文字，当用户按下退格键时，就不会产生任何效果。

示例2

<html>
<head>
  <title>屏蔽 F5 键</title>
</head>
<body>
  <p>请尝试按 F5 键</p>
  <script>
    document.onkeydown = function() {
      if (window.event.keyCode == 116) {
        window.event.keyCode = 0;
        window.event.returnValue = false;
      }
    };
  </script>
</body>
</html>

以上是另一个示例，页面上同样只有一段文字，当用户按下 F5 键时，也不会产生任何效果。

沃梦达教程

本文标题为：js屏蔽退格键(backspace或者叫后退键与F5)