jQuery myPass - password hiding iPhone-Style
About
Other night I was sitting on the sofa and wanted me on my iPhone when Facebook login, entering my password when I fell back on that little detail, which is the input of the password more pleasurable yet.
One or the other iPhone owners know what I mean. in the field ever for a short time of the last entered password to see the point of which is what gives the user more security but that his entry was incorrect.
I thought something like that could also be quite normal forms and therefore we have written a small jQuery plugin that mimics this behavior.
How to use
jQuery myPass uses jQuery Javascript library .
You have to embed only the two files into your header.
1 2 | "_js/jquery.js" type = "text/javascript" ></ script > < script src = "_js/jquery.myPass-1.0.js" type = "text/javascript" ></ script > <Script src = "_js / jquery.js" type = "text / javascript"> </ script> <script src = "_js/jquery.myPass-1.0.js" type = "text / javascript"> </ script> |
Options
To activate the plugin and you have to stop now just write the following in your header
1 2 3 4 5 | ) . myPass ( { $ ('. MyTextField'). MyPass (( , charReplace: '% u2665', charDuration: 1000 )); |
- charReplace: Here you can set by the sign whose letters are replaced sollen.Als default point is the standard set. Other characters can be found here . Simply take the last 4 digits of the Unicode and is% u before. charReplace eg '% u2665' to use instead of a • ♥.
- charDuration: Here you can set your time as the last character to appear.
HTML
In the HTML part of your site you shall now simply a normal text box, give it a name and the class which you have entered above.
In this instance. myTextField.
1 2 3 4 | "test.php" method = "post" > < input class = "myTextField" name = "password" type = "text" /> < input name = "Send" type = "submit" value = "submit" /> </ form > <Form action = "test.php" method = "post"> <input class = "myTextField" name = "password" type = "text" /> <input name = "Send" type = "submit" value = "submit "/> </ form> |
After you send the form, your data can easily process eg via PHP.
1
| [ 'password' ] ; echo $ _POST ['password']; |
Download & Demo
Demonstration - Plugin in Action
Download - All the files for download
Related Articles
4:00 Responses to "jQuery myPass - password hiding iphone-style"
Comments
NiKo on July 4th, 2009
Very nice, but may I suggest you that degrades the input to a input [type = password] rather than a text one?
You can clone an input [type = password] to be able to retrieve its value, something like that: http://fr.pastebin.ca/1474004
ahayek on December 17th, 2009
Hello,
I added support default password if someone wants to initialize the password field with a default value.
use:
JS code
(Function () (
$ J.fn.myPass = function (options) (
var defaults = (
charReplace: '% u25CF'
charDuration: 1000
)
var opts = $ j.extend (defaults, options);
var active = null;
$ J (this). Each (function () (
tempField = $ j (this). attr ('name');
$ J (this). Attr ('name', 'tmp_' + tempField);
var default Password = $ j (this). val ();
var hidden Pass = "";
if (default password! = ") (
for (i = 0; i <= defaultPassword.length-1; + + i) (
Pass Pass hidden = hidden + unescape (opts.charReplace);
)
)
$ J (this). Val (hidden passport);
$ J (this). Parent (). Append ('');
));
$ J (this). Bind ("keypress", function (evt) (
clearTimeout (active);
var pass = hidden ";
var current value = $ j (this). val ();
if (currentValue.length> 0) (
if (evt.which == 8) (
deleteLast (this);
) Else (
current value = current value + $ j (this). val (). slice ($ j (this). val (). length - 1);
for (i = 0, i <= $ j (this). val (). length-1; + + i) (
Pass Pass hidden = hidden + unescape (opts.charReplace);
)
last letter = $ j (this). val (). charAt ($ j (this). val (). length-1);
if (last Letter! = unescape (opts.charReplace)) (
saveString (last letter, this);
)
$ J (this). Val (hidden passport);
active = setTimeout ("hideAll ('" + $ j (this). attr (' name ') + "')", opts.charDuration);
)
) Else (
current value = $ j (this). val ();
tempField var = $ j (this). attr ('name');
var = hiddenid tempField.substr (tempField.indexOf ('_')+ 1);
$ J ('#'+ hiddenid). Val ('');
)
));
hideAll = function (el) (
last letter = $ j ('input [name =' + el +']'). val (). charAt ($ j ('input [name =' + el +']'). val (). length-1);
var = hiddenid el.substr (el.indexOf ('_')+ 1);
var tmpStr = $ j ('#'+ hiddenid). val ();
$ J ('#'+ hiddenid). Val (tmpStr + last letter);
var hidden Pass ='';
for (i = 0; i <= $ j ('input [name =' + el +']'). val (). length-1; + + i) (
Pass Pass hidden = hidden + unescape (opts.charReplace);
)
$ J ('input [name =' + el +']'). val (hidden passport);
)
saveString = function (str, el) (
tempField var = $ j (el). attr ('name');
var = hiddenid tempField.substr (tempField.indexOf ('_')+ 1);
var tmpStr = $ j ('#'+ hiddenid). val ();
$ J ('#'+ hiddenid). Val (tmpStr + str);
)
deleteLast = function (el) (
tempField var = $ j (el). attr ('name');
var = hiddenid tempField.substr (tempField.indexOf ('_')+ 1);
var tmpStr = $ j ('#'+ hiddenid). val ();
var length = $ j ('#'+ hiddenid). val (). length;
$ J ('#'+ hiddenid). Val (tmpstr.substring (0, length-1));
)
);
})();
Enjoy!
ahayek on December 17th, 2009
dont forget autocomplete = "off" for all navigators!