Skip to content

Instantly share code, notes, and snippets.

@hyrmn
Created October 4, 2019 17:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hyrmn/b1a61aa227425a826478486ab27eb707 to your computer and use it in GitHub Desktop.
Save hyrmn/b1a61aa227425a826478486ab27eb707 to your computer and use it in GitHub Desktop.
Show a little capslock warning if the user tries to log in while their capslock key is on.
<script>
(function() {
var capsLockEnabled = false;
document.onkeypress = function (e) {
e = e || window.event;
var s = String.fromCharCode(e.keyCode || e.which);
if (s.toLowerCase() === s.toUpperCase()) {
return;
}
capsLockEnabled = s.toUpperCase() === s && !e.shiftKey;
_showCapsAlert();
}
document.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode === 20) {
capsLockEnabled = !capsLockEnabled;
}
_showCapsAlert();
}
function _showCapsAlert() {
var warningEl = document.getElementById('capsWarning');
if (warningEl == null) {
return;
}
if (capsLockEnabled) {
warningEl.style.visibility = 'visible';
} else {
warningEl.style.visibility = 'hidden';
}
}
})();
</script>
@hyrmn
Copy link
Author

hyrmn commented Oct 4, 2019

This isn't perfect... like if you go to the page with capslock on and then turn it off, it only knows that you changed capslock state so it shows the warning. If you go with it on and then type something, it will prompt and let you know. if you load the page with capslock off and then turn it on (like I do all of the time when I'm hitting that a key), then it will show the warning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment