如何制作一个HTML页面的锁屏功能

如果后台一些界面比较敏感,希望主动或者被动的在人员不想暴露信息的情况下加一把锁,就是说避免信息一直在页面上暴露,可以使用”阅后即焚“这种思路,这种思路比较简单,显示了就过几秒删除,js remove节点即可(如果有必要做成真正的只能读一次那后台数据也要删掉),还有一个办法是给页面锁屏。

如何给某个页面加上一个锁屏功能呢,表现形式有这么几种

1.长时间未操作页面自动跳到一个锁屏提示页面需要再次输入密码才能进入。实现方案可以是定时器监控到页面有没有被操作了,长时间未动,自己跳转一下。

2.点击某个按钮(立即锁屏)这种主动触发,这个就比较简单了,a标签页面跳转即可。

3.用户按下键盘进行触发锁屏,本文主要说这个。

前面两种思路都很清晰很容易做到,第三种需要点键盘事件触发的概念,比如 Ctrl+l,查了一下,可以这样做,上代码

<!DOCTYPE html>
<html>
<head>
    <title>Ctrl+l监控锁屏</title>
</head>
<body>
  <div id="message_div"></div>
  <script type="text/javascript" language=JavaScript>
    document.onkeydown=function(event){
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e.keyCode == 76 && e.ctrlKey) {
        document.getElementById("message_div").innerHTML="你按下了ctrl+l,开发的时候可以跳到一个锁屏的页面";
        // window.location.href = '锁屏页面';
        return false;
      }
    };
  </script>
</body>
</html>

你可以看到当按下 ctrl l,页面的文字出现了

核心点就是这个onkeydown监控 以及各个键对应的code值,还有这种判断 ctrl 是否按下的判断条件。

如果你想知道的更详细 可以打印 

console.log(e);

就能知道它应该怎么用了,例如我按下小写的l

关于列表的对照 可以看这里

8 BackSpace BackSpace
9 Tab Tab
12 Clear
13 Enter
16 Shift_L
17 Control_L
18 Alt_L
19 Pause
20 Caps_Lock
27 Escape Escape
32 space
33 Prior
34 Next
35 End
36 Home
37 Left
38 Up
39 Right
40 Down
41 Select
42 Print
43 Execute
45 Insert
46 Delete
47 Help
48 0 equal braceright
49 1 exclam onesuperior
50 2 quotedbl twosuperior
51 3 section threesuperior
52 4 dollar
53 5 percent
54 6 ampersand
55 7 slash braceleft
56 8 parenleft bracketleft
57 9 parenright bracketright
65 a A
66 b B
67 c C
68 d D
69 e E
70 f F
71 g G
72 h H
73 i I
74 j J
75 k K
76 l L
77 m M mu
78 n N
79 o O
80 p P
81 q Q at
82 r R
83 s S
84 t T
85 u U
86 v V
87 w W
88 x X
89 y Y
90 z Z
112 F1
113 F2
114 F3
115 F4
116 F5
117 F6
118 F7
119 F8
120 F9
121 F10
122 F11
123 F12
124 F13
125 F14
126 F15
127 F16
128 F17
129 F18
130 F19
131 F20
132 F21
133 F22
134 F23
135 F24
136 Num_Lock
137 Scroll_Lock
原文地址:https://www.cnblogs.com/lizhaoyao/p/13084914.html