AutoHideInput is a simple jQuery and Zepto plugin for hiding and showing secure fields.
When a HTML-designer sets the password field as type="password", thus not letting the user see what’s written inside the form field. This plugin helps the user to see what he input into this field. Once a field loses focus, all the typed symbols will be hidden.
- show/hide important information when you enter
- additional security for secure fields when you enter
- full support touch devices
- simple installation
- easy of use and setup
- taking care of your customers
- fast and lightweight (<1Kb)
jquery.autohideinput.js requires either jQuery or Zepto
Additional ways to ensure greater protection of your users (hidding secure fields). Once you start using jquery.autohideinput.js, your users will feel cared about them.
The plugin supports AMD.
If you plan on using jquery.autohideinput.js as an asynchronous module with Zepto, you'll want to map Zepto to the name jquery in your path config:
require.config({
paths: {
jquery: 'path/to/zepto'
}
});To use it, simply. Select the form <input> element or elements. It works with any <input> field on the page, it can replace a single element, each element with a specific class/id/name, or property, or every <input> element.
You can control the plugin using javascript or directly in the HTML-code using the tag data-hide
If Bower's your thing, you can install this plugin by running bower install AutoHideInput in your project directory.
1.Add to your page load jQuery and plugin:
<head>
…
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="jquery.autohideinput.min.js"></script>
…
</head>2.Use the plugin:
// to enable the plugin
$('#id').hideinput('hide', true);
// to disable the plugin
$('#id').hideinput('hide', false); 3.Enjoy
1.Add to your page load jQuery and plugin:
<head>
…
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="jquery.autohideinput.min.js"></script>
…
</head>2.In your HTML-code:
<input type="text" name="loginname" id="loginname" placeholder="login" data-hide="true">data-hide="true"- can take two valuestrueorfalse, respectively on/off plugin for the current field
Internet Explorer 10 includes its own control for toggling password visibility that can compete with this plugin when enabled.
You can disable this control for any element by specifying a style for the ::ms-reveal pseudo-class:
::-ms-reveal { display: none !important; }More info on MSDN.
If you'd like to contribute to this project, create a branch and send a pull request for that branch. Lint and test your code.
I’ll continue to work and improve the script features regardless of the outcome of funding, because it's rewarding to see that people are using it and it does the job for them. Still I would appreciate your support in covering some of the expenses with the domain hosting and programming hours which are taken from my family time.
Donate any amount for my projects https://paypal.me/xvoland
Copyright © 2013 Vitalii Tereshchuk. Licensed under the MIT and GPL licenses.
I'm an independent developer and researcher in web development. Many of you I'll be happy to see on my personal website