jq操作代替placeholder属性（兼容ie8）

最新推荐文章于 2019-10-22 17:48:13 发布

原创最新推荐文章于 2019-10-22 17:48:13 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单示例，该示例展示了如何在输入框获得焦点时隐藏提示文字，并在失去焦点且内容为空时重新显示提示文字。此功能常用于网页表单中，以改善用户体验。

html代码

<div class="input-list">
        <!-- 请输入您的手机号或绑定邮箱 -->
      <input  type="password" value="" />
      <span class="txt-default">请输入您的手机号</span>

</div>

js代码

<script src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
     $(".input-list").on('focus', 'input', function(event) {
         $('.txt-default').hide();

     }).on('blur', 'input', function(event) {
         var oval = $(this).val();
         if (!oval) {
             $('.txt-default').show();
         } else{
            $('.txt-default').hide();
         };
     });
</script>