鼠标离开和点击事件——输入框提示语

输入框提示文字效果实现

最新推荐文章于 2024-10-15 08:00:00 发布

原创最新推荐文章于 2024-10-15 08:00:00 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

JS我的大爱专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种网页登录界面中输入框提示文字的实现方式。当用户点击输入框时，提示文字会自动消失；当用户移开鼠标，若未输入内容则提示文字重新出现。这种方式提高了用户体验并简化了前端开发工作。

<input id="phone_num" name="wxuser" type="text" maxlength="11" value="请输入11位手机号码" onfocus="if (value =='请输入11位手机号码'){value =''}" onblur="if (value ==''){value='请输入11位手机号码'}" />
<input id="login_pwd" name="wxpasswd" type="password" value="请输入登录密码" onfocus="if (value =='请输入登录密码'){value =''}" onblur="if (value ==''){value='请输入登录密码'}"/>

效果如下：

鼠标点击第一个输入框，提示文字消失；鼠标离开第一个输入框，提示文字显示。