rigalpatel001 · August 17, 2024 09:35
diff --git a/Detect_CapsLock.html b/Detect_CapsLock.html
 When users enter passwords or other sensitive information in a web application, it's crucial to provide them with the best possible experience. One common issue is the accidental activation of Caps Lock, which can lead to failed login attempts and user frustration. In this blog, we’ll explore simple ways to detect Caps Lock using JavaScript to improve your application's usability and security.

 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Caps Lock Detection Test</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 50px;
      }
      .caps-warning {
        color: red;
        font-weight: bold;
        display: none;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Test Caps Lock Detection</h1>
    <p>Type in the input field below and see if Caps Lock is detected:</p>

    <input
      type="password"
      id="passwordInput"
      placeholder="Enter your password"
    />
    <div id="capsWarning" class="caps-warning">Caps Lock is ON!</div>

    <script>
      const passwordInput = document.getElementById("passwordInput");
      const capsWarning = document.getElementById("capsWarning");

      // Method 1: Using keydown and keyup events with getModifierState
      passwordInput.addEventListener("keydown", function (event) {
        if (event.getModifierState("CapsLock")) {
          capsWarning.style.display = "block";
        } else {
          capsWarning.style.display = "none";
        }
      });

      // Method 2: Using keypress event and checking event.which value
      passwordInput.addEventListener("keypress", function (event) {
        let charCode = event.which || event.keyCode;
        let character = String.fromCharCode(charCode);

        if (
          character.toUpperCase() === character &&
          character.toLowerCase() !== character &&
          !event.shiftKey
        ) {
          capsWarning.style.display = "block";
        } else {
          capsWarning.style.display = "none";
        }
      });

      // Method 3: Combining keydown, keyup, and keypress events
      let isCapsLockOn = false;

      passwordInput.addEventListener("keydown", function (event) {
        if (event.getModifierState("CapsLock")) {
          isCapsLockOn = true;
          capsWarning.style.display = "block";
        } else {
          isCapsLockOn = false;
          capsWarning.style.display = "none";
        }
      });

      passwordInput.addEventListener("keypress", function (event) {
        let charCode = event.which || event.keyCode;
        let character = String.fromCharCode(charCode);

        if (
          character.toUpperCase() === character &&
          character.toLowerCase() !== character &&
          !event.shiftKey
        ) {
          if (!isCapsLockOn) {
            isCapsLockOn = true;
            capsWarning.style.display = "block";
          }
        }
      });
    </script>
  </body>
 </html>
	When users enter passwords or other sensitive information in a web application, it's crucial to provide them with the best possible experience. One common issue is the accidental activation of Caps Lock, which can lead to failed login attempts and user frustration. In this blog, we’ll explore simple ways to detect Caps Lock using JavaScript to improve your application's usability and security.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Caps Lock Detection Test</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 50px;
	}
	.caps-warning {
	color: red;
	font-weight: bold;
	display: none;
	margin-top: 10px;
	}
	</style>
	</head>
	<body>
	<h1>Test Caps Lock Detection</h1>
	<p>Type in the input field below and see if Caps Lock is detected:</p>

	<input
	type="password"
	id="passwordInput"
	placeholder="Enter your password"
	/>
	<div id="capsWarning" class="caps-warning">Caps Lock is ON!</div>

	<script>
	const passwordInput = document.getElementById("passwordInput");
	const capsWarning = document.getElementById("capsWarning");

	// Method 1: Using keydown and keyup events with getModifierState
	passwordInput.addEventListener("keydown", function (event) {
	if (event.getModifierState("CapsLock")) {
	capsWarning.style.display = "block";
	} else {
	capsWarning.style.display = "none";
	}
	});

	// Method 2: Using keypress event and checking event.which value
	passwordInput.addEventListener("keypress", function (event) {
	let charCode = event.which \|\| event.keyCode;
	let character = String.fromCharCode(charCode);

	if (
	character.toUpperCase() === character &&
	character.toLowerCase() !== character &&
	!event.shiftKey
	) {
	capsWarning.style.display = "block";
	} else {
	capsWarning.style.display = "none";
	}
	});

	// Method 3: Combining keydown, keyup, and keypress events
	let isCapsLockOn = false;

	passwordInput.addEventListener("keydown", function (event) {
	if (event.getModifierState("CapsLock")) {
	isCapsLockOn = true;
	capsWarning.style.display = "block";
	} else {
	isCapsLockOn = false;
	capsWarning.style.display = "none";
	}
	});

	passwordInput.addEventListener("keypress", function (event) {
	let charCode = event.which \|\| event.keyCode;
	let character = String.fromCharCode(charCode);

	if (
	character.toUpperCase() === character &&
	character.toLowerCase() !== character &&
	!event.shiftKey
	) {
	if (!isCapsLockOn) {
	isCapsLockOn = true;
	capsWarning.style.display = "block";
	}
	}
	});
	</script>
	</body>
	</html>