CSS Codes
CSS Layouts
View RSS Feed

keyboard

Show plain text in a password field

Rating: 14 votes, 4.43 average.
1 Comment
by
keyboard
, 06-06-2012 at 12:51 PM (47534 Views)
I was browsing the internet and came across this tecnique and thought it was rather cool.

To make plain text show in a password field, you need the following form -

HTML Code:
 <form>
 <input type="text" name="passwordPlain" id="passwordPlain" value="Password" onfocus="swapPasswordBoxes('click')" style="display:none;"/>
 <input type="password" name="password" id="password" value="" onblur="swapPasswordBoxes('blur')" />
 </form>
Run this function once the page has loaded (<body onload="onPageLoaded()">)

HTML Code:
function onPageLoaded() {
	document.getElementById('password').style.display = "none";
	document.getElementById('passwordPlain').style.display = "inline";
}
And add this function to your javascript as well

HTML Code:
function swapPasswordBoxes(funcType) {
	if(funcType == "click") {	
		document.getElementById('passwordPlain').style.display = "none";
		document.getElementById('password').style.display = "inline";
		document.getElementById('password').focus();
	} else {
		if(document.getElementById('password').value.length == 0) {
			document.getElementById('passwordPlain').style.display = "inline";
			document.getElementById('password').style.display = "none";
		}
	}
}
This means that the plain text box is visible to the user when they load the page (if they have javascript {else it just shows the standard password box}).

Then when they click on the plain text box, that box is made invisible and the password box is made visible (and it sets the focus to this box as well). If they click off the password box, and the box is empty, it is reset to the plain text box.

Full working code -

HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onPageLoaded() {
	document.getElementById('password').style.display = "none";
	document.getElementById('passwordPlain').style.display = "inline";
}
function swapPasswordBoxes(funcType) {
	if(funcType == "click") {	
		document.getElementById('passwordPlain').style.display = "none";
		document.getElementById('password').style.display = "inline";
		document.getElementById('password').focus();
	} else {
		if(document.getElementById('password').value.length == 0) {
			document.getElementById('passwordPlain').style.display = "inline";
			document.getElementById('password').style.display = "none";
		}
	}
}
</script>
</head>
<body onload="onPageLoaded()">
<form>
<input type="text" name="passwordPlain" id="passwordPlain" value="Password" onfocus="swapPasswordBoxes('click')" style="display:none;"/>
<input type="password" name="password" id="password" value="" onblur="swapPasswordBoxes('blur')" />
</form>
</body>
</html>

Submit "Show plain text in a password field" to del.icio.us Submit "Show plain text in a password field" to StumbleUpon Submit "Show plain text in a password field" to Google Submit "Show plain text in a password field" to Digg

Updated 06-08-2012 at 10:23 PM by keyboard (swapped onclick for onfocus)

Tags: None Add / Edit Tags
Categories
Post a JavaScript

Comments

  1. traq's Avatar
    I wonder if you could instead change the type of the input (i.e., from password to text) on the fly...?

    Edit: Answer:

    HTML Code:
    <input type="password" id="pass">
<input type="button" onclick="textpass( 'pass' );" value="Show/Hide Password">

<script>
function textpass(elID){
    var el = document.getElementById( elID ) || false;
    if( !el ){ return; }
    if( el.getAttribute( 'type' ) == 'text' ){ el.setAttribute( 'type','password' ); }
    else{ el.setAttribute( 'type','text' ); }
}
</script>
    Tested only in Chrome. I suspect this is not very cross-browser-able.
    Updated 12-05-2012 at 11:19 PM by traq