使用 JavaScript 实现输入框聚焦时隐藏默认提示文字

作者:纸飞机

时间:2026-10-21

浏览:79

本文介绍如何利用 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>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章