자바스크립트가 있는 입력 필드 내부에 capslock이 켜져 있는지 알아보려면 코드는 다음과 같습니다. -
예시
<!DOCTYPE html>
<html>
<head>
<style>
#textBox {
display: none;
color: red;
}
</style>
<body>
<h1>Detecting Caps Lock Example</h1>
<input class="inputfield" value="Some textBox.." />
<h2>Press caps lock in the above input field to check warning</h2>
<h2 class="textBox">WARNING! Caps lock is ON.</h2>
<script>
var input = document.querySelector(".inputfield");
var textBox = document.querySelector(".textBox");
input.addEventListener("keyup", event => {
if (event.getModifierState("CapsLock")) {
textBox.style.display = "block";
} else {
textBox.style.display = "none";
}
});
</script>
</body>
</html> 출력
위의 코드는 다음 출력을 생성합니다 -
capslock이 켜진 상태에서 입력 필드에 무언가를 입력할 때 -
