如果后台一些界面比较敏感,希望主动或者被动的在人员不想暴露信息的情况下加一把锁,就是说避免信息一直在页面上暴露,可以使用”阅后即焚“这种思路,这种思路比较简单,显示了就过几秒删除,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 | |
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 |
来源:oschina
链接:https://my.oschina.net/u/4404102/blog/4307882