Question

我有一个注册表单，其中输入的标题位于文本框中，当您单击该框时，文本消失，但是在密码上我希望预览文本保留为“密码”而不是“••••••••”。但是当用户点击文本框时应该清除文本，并且输入的文本应该是“•••••••”。

这是按钮的代码：

<form method="post" action="register_process.php">
    <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
    <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
    <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD';}" name="password"  />
    <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM';}" name="password_confirm"  />    <br/>
    <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

所有其他工作正常，但我希望用户密码不会显示。此外，我现在已将密码字段保留为文本。

要查看操作，请参阅此处：http://jsfiddle.net/e458S/

感谢。

Answer 1

您可以使用javascript setAttribute

<form method="post" action="register_process.php">
   <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
   <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
   <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD') {this.value = ''; setAttribute('type', 'password');}"   onblur="if (this.value == '') {this.value = 'PASSWORD';setAttribute('type', 'text');}" name="password"  />
   <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = ''; setAttribute('type', 'password');}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM'; setAttribute('type', 'text');}" name="password_confirm"  />   <br/>
   <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

示例here

最后我发现了一个错误，当输入密码时，在它之前我将焦点更改为另一个字段，并返回密码，该字段清除。来自于 onclick="this.value=''";如果你想处理事件onclick只是删除this.value=''因为它适用于onfocus，或者只是添加条件if(this.value=='password')，否则如果使用与onfocus相同的onclick事件，最好删除onclick事件处理程序，onfocus就足够了。

Answer 2

请记住以下内容：

密码字段应为input type='password'，这允许浏览器应用不同的安全注意事项（例如不允许复制）。此外，触摸设备可以选择性地提供显示/隐藏密码以用于可用性目的。
最好，脚本不应该是内联的。相反，更喜欢不引人注目的JavaScript，它将自己附加到适当的元素上。
人们使用各种输入机制。

我建议使用功能检测的HTML placeholder属性，以便在不支持placeholder的情况下修改显示。

简单示例：http://jsfiddle.net/fbw7j/3/

<input type="password" placeholder="enter a password">

// feature detection using the Modernizr library
if(!Modernizr.input.placeholder){
    // alter your markup
    $("input[type=password]").after("<span>Password</span>");
}

Answer 3

查看http://jsfiddle.net/e458S/39/

<input type="text" class="button" value="PASSWORD-OK" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD-OK') {this.value = ''; this.type='password';}" onblur="if (this.value == '') {this.value = 'PASSWORD-OK'; this.type='text';}" name="password"/>

但使用占位符也很好。

<input type="password" placeholder="enter a password">

密码输入字段在焦点/类型上从文本更改为密码？

3 个答案: