Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Phương thức getModifierState() của KeyboardEvent trong HTML DOM

Phương thức getModifierState() trả về true/false cho biết phím chỉnh sửa (modifier key) được cung cấp có được nhấn hay không.

Cú pháp

Gọi getModifierState() với tham số là phím chỉnh sửa:

event.getModifierState("modifierKey")

Các phím chỉnh sửa (modifierKey)

modifierKey có thể là:

modifierKey
Alt
AltGraph
CapsLock
Control
Meta
NumLock
ScrollLock
Shift

Ví dụ

Ví dụ minh họa phương thức getModifierState():

<!DOCTYPE html> <html> <head> <title>KeyboardEvent getModifierState()</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>KeyboardEvent getModifierState()</legend> <label>Mật khẩu: <input type="password" id="textSelect" onkeydown="getEventState(event)" autocomplete="off"> </label> <div id="divDisplay"></div> </fieldset> </form> <script> window.addEventListener('keydown', function(event) { console.log('CapsLock', event.getModifierState("CapsLock")); }); var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); divDisplay.textContent = 'Press CapsLock key while typing'; function getEventState(InputEvent) { if(InputEvent.getModifierState("CapsLock")) divDisplay.textContent = 'CapsLock is turned on. Beware!'; else divDisplay.textContent = 'CapsLock is turned off.'; } </script> </body> </html>

Kết quả

Trước khi bật phím CapsLock 'ON':

Phương thức getModifierState() của KeyboardEvent trong HTML DOM

Sau khi bật phím CapsLock 'ON':

Phương thức getModifierState() của KeyboardEvent trong HTML DOM

Sau khi tắt phím CapsLock 'OFF':

Phương thức getModifierState() của KeyboardEvent trong HTML DOM