Question

我的网站有一部分用户登录，我希望文本框中填充默认值，但显然密码文本框需要更改为type =“password”用户点击隐藏字符。这个IMO的一个很好的例子是在Apple的www.me.com网站上。有关最佳实施方式的任何帮助吗？

Answer 1

嗯，您更改类型的想法适用于大多数浏览器。但是，旧版本的IE不允许您动态修改输入控件的类型，从而使复杂的节点替换可能会丢失进程中的信息。相反，您应该使用新的HTML5 placeholder属性，该属性在每个浏览器中都不起作用，但比执行此替换所需的脚本更明显和更精简。它易于使用：

<input type="password" name="pwd" value="" placeholder="Enter your password." />

它与Firefox 3.7或更高版本，Chrome和Safari 4或更高版本以及IE9或更高版本兼容。

Answer 2

如果您想更改类型，只需使用javascript函数在用户点击文本框时更改它。

<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()" />

但是，正如其他海报所建议的那样 - 考虑使用占位符属性。

Answer 3

示例：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';
    }
}

Answer 4

执行此操作的一种方法是显示一个带有默认值的控件...然后用户输入控件，隐藏它并在该点显示实际的密码控件。当用户离开密码控件时，如果她实际上没有输入值，或者已经删除了现有值，那么当时重新显示第一个控件并隐藏密码控件。以下是示例代码：

<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>

Answer 5

Apple在Me.com上的做法是将输入字段设置为透明，然后在其后面放置一个DIV，并显示要显示的文本。当有人开始在字段中输入时，他们会隐藏其背后的标签div。

如果您不想像其他人所建议的那样使用placeholder=""（我不确定为什么Apple不会这样做，因为Safari支持它？），另一种方法是拥有图像加载作为该字段的背景，使用您想要的占位符文本，然后在有人开始输入时为其指定一个具有background:none CSS属性的类。这将需要更少的额外标记（但在Photoshop中更多的修修补补......）。

Javascript：在点击时更改文本框“类型”

5 个答案: