如果后台一些界面比較敏感,希望主動或者被動的在人員不想暴露信息的情況下加一把鎖,就是說避免信息一直在頁面上暴露,可以使用”閱后即焚“這種思路,這種思路比較簡單,顯示了就過幾秒刪除,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 |