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

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.

  • Publication date: 07.03.2018
  • Source