jquery.oncapslock

A simple, lightweight JavaScript event plugin for detecting user input with caps lock on, with support for jQuery.

jQuery is not required, but if you do use it, the plugin requires version >= 1.7

Tested on modern browsers and IE8.

Installation

With bower:

bower install oncapslock

With npm:

npm install oncapslock

Manually:

Download dist/oncapslock.min.js and include it

Usage

with jQuery

// With jQuery usage is rather straightforward

$('#selector').on('capslock', function (e) {

    alert('You are typing with Caps Lock on!');

});

Vanilla JS

// Without jQuery things get a bit complicated if you intend to support IE8

if (typeof document.addEventListener === 'function') {

    // Modern browsers work as expected
    document.getElementById('example').addEventListener('capslock', yourHandler);

} else {

    // Older IEs don't support custom events, so we'll piggyback on another event
    document.getElementById('example').attachEvent('onpropertychange',
        function(e) {
            
            // You'll have to check that it was actually fired because of caps
            if (e.eventType === 'capslock') {
                yourHandler(e);
            }
        }
    );
}

alternative approach without jQuery

document.getElementById('example').oncapslock = function(e) {
    alert('You are typing with Caps Lock on!');
};