Enable Caps Lock Notification In Password Field - jQuery ls-capslock

ls-capslock is a JavaScript (jQuery) plugin that displays a custom warning message when the user types Caps Lock in an input field (typically a password input).

See also:

• Check Caps Lock Key Is ON/OFF In jQuery - Capslock State
• Caps Lock Notification Plugin For jQuery - Caps-lock

How to use it:

1. Include the ls-capslock's stylesheet ls-capslock.css on the page that provides the styles for the warning messages and input field when the Caps Lock is pressed.

<link rel="stylesheet" href="ls-capslock.css">

2. Include the JavaScript file ls-capslock.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="ls-capslock.js"></script>

3. Initialize the plugin on the existing input field and done.

<input id="example" class="example" type="text">

ls_capslock.init({

  // string element id, string element class, HTMLInputElement, HTMLCollection, Array of HTMLInputElement
  element: '#example'
  
});

4. Customize the warning message.

ls_capslock.init({

  message: 'Caps Lock is pressed!'

});

5. Add custom class(es) to the warning message.

ls_capslock.init({

  // customClasses: ['customClass1', 'customClass2'],
  customClasses: null

});

6. Set the position where the warning message should display.

ls_capslock.init({

  // top, bottom, left, right
  position: 'bottom'

});

---

This awesome jQuery plugin is developed by leandrosimoes. For more Advanced Usages, please check the demo page or visit the official website.