玩玩input中placeholder的交互

作者：Terry2018.04.19来源：Web前端之家浏览：14259评论:0

关键词：JQuery JS

玩玩input中placeholder的交互，具体如下：

运行效果截图如下：

具体DEMO代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery实现placeholder效果</title>
  <script src="/demo/js/jq.js"></script>
  <script>
    $(function () {
      initEvent();
    });
    //初始化提示内容的颜色
    function initEvent() {
      $('input.holder').each(function () {
        var $this = $(this), holder = $this.data('holder');
        if (holder) {
          $this.css('color', '#a9a9a9').val(holder);
        }
      });
      //获取焦点时设置内容的颜色和值为空
      $(document).off('focus', 'input.holder').on('focus', 'input.holder', function () {
        var $this = $(this);
        if ($this.val() === $this.data('holder')) {
          $this.css('color', 'black').val('');
        }
      });
      //失去焦点后还原提示内容
      $(document).off('focusout', 'input.holder').on('focusout', 'input.holder', function () {
        var $this = $(this);
        if ($.trim($this.val()) === '') {
          $this.css('color', '#a9a9a9').val($this.data('holder'));
        }
      });
    }
  </script>
</head>
<body>
  <input type="text" class="holder" name="name" value="" data-holder="请输入账户" /><br><br>
  <input type="text" class="holder" name="name" value="" data-holder="请输入密码" />
</body>
</html>

赏您的支持是我们创作的动力！