Show text in an autoclear password field

[Rosco]

I'm wondering if any of you have ever tried this technique:

I am wanting to implement a minimalist login form for a site header.... Username, Password, Submit button

I want to have a default value for each of the two text inputs, to act instead of a label... and then auto-clear them.  However, of course, the value "Password" displays as ********

I'm sure I've seen password inputs with proper text displayed before clearing the value and putting in a masked password.

Anybody done this before?

[sarahA]

You could change the input type from text to password when the user clicks into the box using javascript?

[Rosco]

You could change the input type from text to password when the user clicks into the box using javascript?

Yeah I've realised that I was Googling for the wrong method of doing it.  I don't want to show the value of a password field, I want to change the input type.  I'm writing a wee function just now, I'll post up the results for future searches... should only take me a few weeks

cheers tho Sarah

[Mr Anderson]

Position the label underneath the input and set the input background to be transparent? Or set the label to overlay and remove on focus?

There's examples of both here:
http://attardi.org/labels/
http://attardi.org/labels2/

Seems a little less drastic that changing the field type.

[Rosco]

hmmm, they look like good solutions Dave... but I've have just returned to this post with what I came up with, and it works

It's a bit long, but it's because of the commenting and ability to swap styles as well

JavaScript:

Code:

<script type="text/javascript">

function inputSwap(oldObject, newType, theValue) {

// create and set type of new input element
var newObject = document.createElement('input');
newObject.type = newType;

// set styles to be applied
var placeholderColor = '#999999';
var textColor = '#333333';
var placeholderStyle = 'italic';
var textStyle = 'normal';

// retain attribute values of old object
if(oldObject.size) newObject.size = oldObject.size;
if(oldObject.name) newObject.name = oldObject.name;
if(oldObject.id) newObject.id = oldObject.id;
if(oldObject.className) newObject.className = oldObject.className;

// swap values and styles
if(oldObject.value==theValue) {
newObject.value = '';
newObject.style.color = textColor;
newObject.style.fontStyle = textStyle;
}
if(oldObject.value=='') {
newObject.value = theValue;
newObject.style.color = placeholderColor;
newObject.style.fontStyle = placeholderStyle;
}
// replace object
oldObject.parentNode.replaceChild(newObject,oldObject);

// set focus
newObject.focus();

return newObject;

}

</script>

HTML:

Code:

<form action="login.php" method="post">
<input type="text" class="input" name="txtHandle" id="txtHandle" value="Username" onclick="inputSwap(this, 'text', this.value);" onfocus="inputSwap(this, 'text', this.value);" />
<input type="text" name="txtPassword" id="txtPassword" value="Password" onclick="inputSwap(this, 'password', this.value);" onfocus="inputSwap(this, 'password', this.value);" />
<input name="submit" type="image" src="btnIndexLogin.png" id="btnLogin" value="Login" />
</form>

Any thoughts/feedback?

[Mr Anderson]

The lack of a label's always a concern to me, especially removing it entirely. And adding everything in via javascript can leave trhings missing for a lot more that screen reader users. Having thought about it for a second, there are other ways. You could set the background to the input to have the word password in it, and then swap the background on focus with CSS (if you need to support obsolete browsers then a little js to dim it). Then have a proper label offset from the page to hide it, but with it still available to screen reader users at the very least.

Code:

<form action="login.php" method="post">
<fieldset>
<label for="txthandle">Username</label>
<input type="text" class="input" name="txtHandle" id="txtHandle" value="Username" />
<label for="txtPassword">Password</label>
<input type="text" name="txtPassword" id="txtPassword" value="Password" />
<input name="submit" type="image" src="btnIndexLogin.png" id="btnLogin" value="Login" />
</fieldset>
</form>

label {
position: absolute;
top: -10000px;
left: -10000px;
}
#txtPassword {
background: #fff url(password.gif) no-repeat 0 0;
}

#txtPassword:focus {
background: #fff;
}

[Rosco]

Thanks.  I had actually already started to try out your earlier suggestion (the example links), as my conscience was bothering me about not having labels

Can't get it working, but it's probably something daft

I'll stick with trying to keep it as accessible as possible, as I wasn't really happy with such a heavy javascript solution, changing input element types etc

Although the job in question is an adult 'dating' site, so I doubt any of the target audience will be using screen readers

[Rosco]

sorted now, went with a JQuery plugin which puts the labels in-field... as per Dave's earlier suggestion

cheers