Q1727 How can I hint to the user that I want a password enter into a text field, and then when the user enters text into the field it turns into a password field?

irt.org | Knowledge Base | JavaScript | Password | Q1727 [ previous next ]

Q1727 How can I hint to the user that I want a password enter into a text field, and then when the user enters text into the field it turns into a password field?

The following works in Netscape Navigator 6 (it may also work in Internet Explorer 5):

<html>

<head>

<script language="JavaScript"><!--
function plaintext(field, button) {
  field.type = 'text';
  button.value = 'password';
}

function cryptic(field, button) {
  field.type = 'password';
  button.value = 'text';
}

function toggle(field, button) {
  if (field.type == 'text') cryptic(field, button); else plaintext(field, button);
}
//--></script>

</head>

<body>

<form>

<input type="text" name="pwd" value="password" size="12"
onFocus="if (this.value == 'password') { this.value=''; cryptic(this, this.form.but); }"
onBlur="if (this.value == '') { this.value='password'; plaintext(this, this.form.but); } else cryptic(this, this.form.but) ">

<input type="button" name="but" value="password" onClick="toggle(this.form.pwd, this)">

</form>

</body>

</html>

If you don't want or need the toggling button then the above can be simplified as:

<html>

<body>

<form>

<input type="text" name="pwd" value="password" size="12"
onFocus="if (this.value == 'password') { this.value=''; this.type='password'; }"
onBlur="if (this.value == '') { this.value='password'; this.type='text'; } else this.type='password'">

</form>

</body>

</html>

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.