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 键时,也不会产生任何效果。

相关文章