我有一个注册表单,其中输入的标题位于文本框中,当您单击该框时,文本消失,但是在密码上我希望预览文本保留为“密码”而不是“•• ••••••”.但是当用户点击文本框时应该清除文本,并且输入的文本应该是“•••••••”.
这是按钮的代码:
<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/
谢谢.
解决方法:
您可以使用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就足够了.