Barattalo

Sometime designers put form labels and instrucions into html inputs. One of the common uses is for login boxes when there’s not much space.

An example of login form design

In this case, you have to choose between:

1. Set the password field as type=”text”, thus not masking users’ passwords;
2. Set the password field as type=”password”, thus not letting the user see what’s written inside the form field.

To avoid this problems, I wrote a small jQuery plugin which dynamically replaces selected <input type=”password” /> fields with <input type=”text” /> fields displaying a chosen value. The replace procedure works forth and back: when the user clicks on the input field it is transformed into a <input type=”password” />; if the user inserts some text, then the field remains masked, if he/she does not insert anything, the field is replaced again, letting the chosen value be visible again.

To use it, simply select the form element you want to replace.It works with any input type=”password” on the page, it can replace a single element, each element with a specific class, or property, or every password element.

// Replaces each <input type="password" /> element
$(document).ready(function () {
 $('input[type=password]').txReplaceFormPassword({
 show_text : 'Password'
 });
 });

// Replaces the <input type="password" /> element with id="pwd"
$(document).ready(function () {
 $('#pwd').txReplaceFormPassword({
 show_text : 'Password'
 });
 });

// Replaces each <input type="password" /> element with class="password"
$(document).ready(function () {
 $('.password').txReplaceFormPassword({
 show_text : 'Password'
 });
 });

Here is the complete code:

/***********************************************************
* txReplaceFormPassword.js
*
* Written by Simone Lippolis - http://simonelippolis.com
*
* This script is distributed under a Creative Commons - Commercial, Attribution licence
* http://creativecommons.org/licenses/by/2.5/it/
*
* Feel free to copy, edit, redistribute this script. Please, don't remove credits.
*
* If you find some bug or error, please let me know.
*
* How to use:
*
* 1. Include jquery:
* <script type="text/javascript" src="jquery.js"></script>
*
* 2. Include this script:
* <script type="text/javascript" src="txReplaceFormPassword.js"></script>
*
* 3. On document ready, invoke the plugin
*
* $(document).ready(function () {
*         $('#pwd').txReplaceFormPassword({
*            show_text : 'Password'
*        });
*     });
*
* consider '#pwd' as the object which needs to be replaced:
*
* <form action="someaction" method="post" id="formid" name="formname">
*        <input type="password" name="pwd" id="pwd" value="" />
*    </form>
*
* The 'show_text' parameters contains the text to be shown in password's
* text field.
*
***********************************************************/

jQuery.fn.txReplaceFormPassword = function(options) {
 var options = jQuery.extend( {
 show_text: 'Password'
 },options);

 function trim(txt) {
 return txt.replace(/^\s+|\s+$/g, '');
 }

 return this.each(function() {
 if (jQuery(this).val().length == 0) {

 var $pos = jQuery(this).position();
 var $style = jQuery(this).attr('style');
 var $class = jQuery(this).attr('class');
 var $size = jQuery(this).attr('size');
 var $id = jQuery(this).attr('id');
 var $name = jQuery(this).attr('name');

 jQuery(this).hide();
 jQuery(this).after('<input type="text" id="txgrpl-' + $id + '" name="txgrpl-' + $name + '" size="' + $size + '" style="' + $style + '" value="' + options.show_text + '" rel="' + $id + '" title="' + options.show_text + '" />');

 $('#txgrpl-' + $id).focus(function() {
 $(this).hide();
 var $id = $(this).attr('rel');
 $('#' + $id).show().focus();
 });
 }

 jQuery(this).blur(function() {
 if (trim(jQuery(this).val()) == '' || jQuery(this).val() == undefined) {
 var $id = jQuery(this).attr('id');
 jQuery(this).hide();
 $('#txgrpl-' + $id).show();
 }
 });
 });
};

Tags: JQuery, password, password replacer