Enable Caps Lock Notification In Password Field - jQuery ls-capslock
File Size: | 10.6 KB |
---|---|
Views Total: | 1489 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.