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

File Size: 10.6 KB
Views Total: 1401
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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" 
<script src="ls-capslock.js"></script>

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

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

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

4. Customize the warning message.


  message: 'Caps Lock is pressed!'


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


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


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


  // 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.