Javascript: Altering Textbox 'Type' on click
I have a part of my site where users login, and I'd like to have the textboxes populate with default values, but obviously the password textbox needs to cha开发者_开发百科nge to type="password" on a user click to hide the characters. A great example of this IMO is on Apple's www.me.com website. Any help on the best way to implement?
One way to do this is to show a control with the default value in it...then then the user enters the control, hide it and show the actual password control at that point. When the user leaves the password control, if she hasn't actually entered a value, or has deleted the existing value, at that time re-show the first control and hide the password control. Here is example code:
<html>
<head>
<script language="ecmascript">
function HandlePasswordOnFocus() {
if ("none" != TheForm.a.style.display) {
TheForm.a.style.display = "none";
TheForm.b.style.display = "block";
TheForm.b.focus();
}
}
function HandlePasswordOnBlur() {
if ("" === TheForm.b.value) {
TheForm.b.style.display = "none"
TheForm.a.style.display = "block";
}
}
</script>
</head>
<body>
<form name="TheForm">
<input id="a" value="password" onfocus="HandlePasswordOnFocus()" />
<input id="b" type="password" style="display: none" onblur="HandlePasswordOnBlur()" />
</form>
</body>
</html>
Well, your idea of changing the type would work on most browsers. However, old versions of IE do not allow you to dynamically modify the type of an input control, making for a complex node replacement that could lose information in the process. Rather, you should use the new HTML5 placeholder property which does not work in every browser but is more obvious and leaner than the script you would need to perform this replacements. It's easy to use:
<input type="password" name="pwd" value="" placeholder="Enter your password." />
It's compatible with Firefox 3.7 or higher, Chrome and Safari 4 or higher, and IE9 or higher.
If you wish to change the type, you could simply use a javascript function to change it when the user clicks the textbox.
<script type="text/javascript">
function changeType() {
document.getElementById("password").type = "password";
document.getElementById("password").value = "";
}
</script>
<input type="text" id="password" name="password" value="Password" onClick="changeType()" />
But, as other posters have suggested - consider using the placeholder property.
example: http://jsfiddle.net/n3SPH/
<label for="placeholder">Password:</label>
<input type="text" id="placeholder" value="Enter password here" onFocus="setPass();"/>
<input type="password" id="password" value="" onBlur="checkPass();" style="display: none;"/>
JS:
function setPass() {
document.getElementById('placeholder').style.display = 'none';
document.getElementById('password').style.display = 'inline';
document.getElementById('password').focus();
}
function checkPass() {
if (document.getElementById('password').value.length == 0) {
document.getElementById('placeholder').style.display = 'inline';
document.getElementById('password').style.display = 'none';
}
}
The way Apple is doing it at Me.com is they set the input field to be transparent and then have a DIV behind it with the text they want to display. When someone starts typing in the field they hide that label div that's behind it.
If you don't want to use placeholder="" like others have suggested (I'm not sure why Apple didn't just do that since Safari supports it?), another way to do it is to have an image load as a background for that field, with the placeholder text you want, and then give it a class with a background:none CSS property when someone starts typing. That would require less extra mark-up (but more tinkering in Photoshop...).
加载中,请稍侯......
精彩评论