iOS-Like Plain Text Input of Password with jQuery mobilePassword Plugin

File Size: 47.8 KB
Views Total: 4897
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
iOS-Like Plain Text Input of Password with jQuery mobilePassword Plugin

mobilePassword is a jQuery plugin used to show the last character of your password in plain text while typing, as you can see in most mobile devices like iPhone, iPad, etc.

How to use it:

1. Include the jQuery mobilePassword's javascript at the end of your document. Make sure you have jQuery library loaded.

<script src="jquery.min.js"></script>
<script src="js/jquery.mobilePassword.js"></script>

2. Call the plugin on the password input in your document.

$(function(){
  $("input[type=password]").mobilePassword();
});

3. That's it. Style the password input via CSS however you like.

input[type=password] {
...
}

4. Default plugin options.

$("input[type=password]").mobilePassword({

  // check interval in ms
  checkInterval: 200,

  // time to wait before transforming the last letter
  transDelay   : 200,

  // instead of the character
  character    : '%u25CF'
  
});

5. Execute a function when the transform is finished.

$("input[type=password]").mobilePassword({
  callback: null
});

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