A project I'm working on called for the login fields to display the words "EMAIL ADDRESS" and "PASSWORD" in gray, until the user clicked on them, at which point the fields were to behave normally. Here's the script I used -- this is vanilla Javascript, no jQuery.
function convertField(field, isPassword) {
field.style.color = '#000000';
field.style.backgroundColor = '#FFFFFF';
field.onfocus = null;
field.value = '';
if (isPassword) {
var field2 = field.cloneNode(false);
field2.type = 'password';
field2.onfocus = null;
field.parentNode.replaceChild(field2, field);
setTimeout(function () { field2.focus(); }, 5);
}
}For your HTML, you want something like this:
<input type="text" value="EMAIL ADDRESS" onfocus="convertField(this, false)">
<input type="text" value="PASSWORD" onfocus="convertField(this, true)">
The password field is text-type; that's not a mistake. It will become a password field when focused, but until then, we want the contents to be displayed in plain text.
An example in action (with a little extra styling):
No comments:
Post a Comment