3

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

这是按钮的代码：

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

谢谢。

4

3 回答 3

9

You can use 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>

Example here

Finally I found one mistake, when password is typed, and before it I change the focus to another field, and returning back to password, the field clears. It's from onclick="this.value=''"; if You want to handle event onclick just remove this.value='' because it works on onfocus, or just add the condition if(this.value=='password'), otherwise if use onclick event same as onfocus, better remove the onclick event handler, onfocus is enough.

于 2013-03-09T00:09:02.330 回答
3

请记住以下几点：

  • 密码字段应该是 of input type='password'，这允许浏览器应用不同的安全考虑（例如不允许复制）。此外，出于可用性目的，触摸设备可以选择性地提供显示/隐藏密码。

  • 最好，脚本不应该是内联的。相反，更喜欢将自身附加到适当元素的不显眼的 JavaScript。

  • 人们使用各种输入机制。

我建议使用带有特征检测的 HTMLplaceholder属性，以允许您在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>");
}
于 2013-03-09T00:29:10.153 回答
0

看看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">
于 2014-11-20T21:59:59.747 回答