如何制作一個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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM