本文介绍如何利用 JavaScript 的 onfocus 和 onblur 事件,在用户点击输入框时自动隐藏初始提示文字,并在失去焦点且内容为空时重新显示。通过具体的 HTML 和 JS 代码示例,展示了 Email 和密码输入框的实现细节,适用于提升表单用户体验。
输入框默认值隐藏实现示例
<div>
<label for="email">Email</label>
<input name="email" type="text" id="email" style="width:134px;" onfocus="if(this.value=='Input your email')this.value='';" onblur="if(this.value=='')this.value='Input your email';" value="Input your email" />
<label for="pwd">Password</label>
<input name="pwd" type="password" id="pwd" style="width:132px;" onfocus="if(this.value=='inputpass')this.value='';" onblur="if(this.value=='')this.value='inputpass';" value="inputpass" />
</div>