How to write a text description into html input type password

Sometime designers put form labels and instrucions into html inputs. One of the common uses is for login boxes when…

March 10, 2010

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

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 &lt;input type="password" /&gt; element
$(document).ready(function () {
 $('input[type=password]').txReplaceFormPassword({
 show_text : 'Password'
 });
 });
// Replaces the &lt;input type="password" /&gt; element with id="pwd"
$(document).ready(function () {
 $('#pwd').txReplaceFormPassword({
 show_text : 'Password'
 });
 });
// Replaces each &lt;input type="password" /&gt; 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:
* &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
*
* 2. Include this script:
* &lt;script type="text/javascript" src="txReplaceFormPassword.js"&gt;&lt;/script&gt;
*
* 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:
*
* &lt;form action="someaction" method="post" id="formid" name="formname"&gt;
*        &lt;input type="password" name="pwd" id="pwd" value="" /&gt;
*    &lt;/form&gt;
*
* 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('&lt;input type="text" id="txgrpl-' + $id + '" name="txgrpl-' + $name + '" size="' + $size + '" style="' + $style + '" value="' + options.show_text + '" rel="' + $id + '" title="' + options.show_text + '" /&gt;');

 $('#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();
 }
 });
 });
};

Author

Comments on “How to write a text description into html input type password”

2 thoughts

  1. Steph says:

    I had to change the $() to jQuery() in a few places in your code so that it works in compatibility mode. You may wish to update your code to allow for others in the same situation to not have to figure it out.

    Thanks for this great plugin.

    -S

Comments are closed

Recommended

Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

April 20, 2016

Limit the number of categories for posts in WordPress

CHOOSE ONLY ONE CATEGORY WORDPRESS If you need to limit the number of categories used by the authors of your…

September 14, 2015

New Facebook Invite all friends hack

So, you want to invote all your friends but the old hack doesn’t work anymore? With the last facebook friends…

September 14, 2011

Ruler for Google Maps v3 to measure distance on map

I’ve made a ruler to measure distances on a Google Map V3. The file Ruler.js contains a two function: one…

December 19, 2009

Mini gallery/slideshow with PHP and JQuery

Sometimes I’ve had to quickly put in a page a simple slideshow, the first times I’ve searched a lot around…

December 13, 2009

Set “write here” on input type text?

If you are using JQuery framework and you want to set up the default value of some text box in…

November 17, 2009