...

View Full Version : Textbox style changer



SteveDD
12-23-2010, 01:16 PM
Hi,

I am no very little when it comes to Javascript but I have seen a few sites using pre populated text boxes for login forms. So Username and password appears in the boxes to save space.

The code below works fine onload of the site in all browsers, everything also works fine in firefox but ie the following doesn't seem to work.

When a user clicks to enter their password in i.e. it doesn't change the form to password characters so input plain text. Also when you click out of either box it doesn't seem to re-populate the boxes with my Username or Password text.

Any help would greatly be appreciated.


<script>
function HideLabel(txtField){
if(txtField.name=='myusername'){
if(txtField.value==txtField.defaultValue)
txtField.value = '';
else
txtField.select();
} else if(txtField.name=='mypassword'){
if(txtField.value==txtField.defaultValue){
txtField.value = '';
txtField.type = 'password';
}
else{
txtField.type = 'password';
txtField.select();
}
}
}


function ShowLabel(txtField){
if(txtField.name=='myusername'){
if(txtField.value.trim()=='')
txtField.value = txtField.defaultValue;
}else if(txtField.name=='mypassword'){
if(txtField.value.trim()==''){
txtField.value = txtField.defaultValue;
txtField.type = 'text';
}
}
}
</script>

<input type="text" name="myusername" id="myusername" onfocus="HideLabel(this)" onblur="ShowLabel(this)" style="border:0;" value="Username" />

<input type="test" name="mypassword" id="mypassword" value="Password" onfocus="HideLabel(this)" onblur="ShowLabel(this)" style="border:0;" />

Philip M
12-23-2010, 02:17 PM
IE does not support txtField.type.

Try this which will work in all browsers:-


<form name = "myform">
<input type="text" id="passwordtext" value="Enter The Password" onclick="switchTo(1)" onkeydown="switchTo(1)">
<input type="password" id="pword" value="" style="display:none"; onblur="if (this.value=='') {switchTo(0)}">
</form>

<script type = "text/javascript">

function switchTo(qval){
if (qval) {
document.getElementById('passwordtext').style.display="none";
document.getElementById('pword').style.display="inline";
document.getElementById('pword').focus();
}
else {
document.getElementById('pword').style.display="none";
document.getElementById('passwordtext').style.display="inline";
}
}

</script>


He thought he saw an Elephant,
That practised on a fife:
He looked again, and found it was
A letter from his wife.
"At length I realise," he said,
"The bitterness of Life!"
- Lewis Carroll

SteveDD
12-23-2010, 03:10 PM
This is fantastic thank you, what do I need to add to the above code to make this also work on a normal text field. I.e no for the username where I don't require it to change to password protected fields.

Philip M
12-23-2010, 06:44 PM
<input type="text" name="username" value="Enter your username" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if(this.value=='') this.value=this.defaultValue;" />

SteveDD
12-24-2010, 09:50 AM
Thank you for this.

S



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum