jQuery实现的一个自定义Placeholder属性插件

下面是详细的jQuery实现自定义Placeholder属性插件的攻略。

什么是Placeholder？

Placeholder是HTML5新增的一个属性，可以用于在input输入框中显示提示信息。它可以在输入框为空的时候显示提示文字，当用户输入文字时，提示文字就会消失。

但是早期的浏览器并不支持该属性，因此我们需要一个jQuery插件来实现Placeholder的功能。

插件实现的过程

创建HTML代码，添加input输入框以及Placeholder的提示，在鼠标聚焦时隐藏Placeholder。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <script src="./jquery.placeholder.js"></script>
  </head>
  <body>
    <div>
      <input type="text" placeholder="请输入用户名" name="username" id="username" />
    </div>
    <div>
      <input type="password" placeholder="请输入密码" name="password" id="password" />
    </div>
  </body>
</html>

jQuery插件实现

我们可以使用jQuery库的bind()方法和unbind()方法来实现输入框聚焦后提示文字的消失和再次离开输入框的时候显示提示文字。

(function ($) {
  $.fn.Placeholder = function (options) {
    var defaults = {
      color: "#999", //提示文本的默认颜色
    };
    options = $.extend(defaults, options);
    return this.each(function () {
      var $this = $(this);
      var originColor = $this.css("color"); //获取input输入框的颜色

      //获取到Placeholder的提示信息
      var placeholderStr = $this.attr("placeholder");

      //给文本框添加value属性，并且将输入框内如果没有填写则将Placeholder显示在输入框内
      if (placeholderStr) {
        $this.val(placeholderStr).css("color", options.color);
      }

      //绑定聚焦和离开事件
      $this
        .bind("focus", function () {
          var value = $.trim($this.val());
          //判断输入框内是否为Placeholder文本
          if (value === placeholderStr) {
            $this.val("").css("color", originColor);
          }
        })
        .bind("blur", function () {
          var value = $.trim($this.val());
          //如果输入框内是空，则显示Placeholder文本
          if (value === "") {
            $this.val(placeholderStr).css("color", options.color);
          }
        });
    });
  };
})(jQuery);

使用插件

使用上述插件我们只需要在我们的Javascript代码中使用以下语句即可调用

$("#username, #password").Placeholder({
  color: "#999",
});

这样我们就可以为我们的input输入框添加自定的Placeholder提示了。

插件使用示例

插件的具体实现已经说明了，接下来我们来看看一个使用插件渐变Placeholder功能的示例。

示例一

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <script src="./jquery.placeholder.js"></script>
  </head>
  <body>
    <div>
      <input type="text" placeholder="请输入用户名" name="username" id="username" />
    </div>
    <div>
      <input type="password" placeholder="请输入密码" name="password" id="password" />
    </div>
    <div>
      <input type="email" placeholder="请输入邮箱地址" name="email" id="email" />
    </div>
    <script>
      $("#username, #password, #email").Placeholder({
        color: "gray",
      });
    </script>
  </body>
</html>

示例二

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <script src="./jquery.placeholder.js"></script>
  </head>
  <body>
    <div>
      <input type="text" placeholder="请输入您的姓名" name="name" id="name" />
    </div>
    <div>
      <input type="tel" placeholder="请输入电话号码" name="phone" id="phone" />
    </div>
    <div>
      <input type="url" placeholder="请输入网站地址" name="website" id="website" />
    </div>
    <script>
      $("#name, #phone, #website").Placeholder({
        color: "#ABABAB",
      });
    </script>
  </body>
</html>

在以上两个示例中，我们可以看到在input输入框中显示了自定义的Placeholder，如果你在输入框内输入了文字那么Placeholder就会自动隐藏，如果把它删除输入框会再次显示Placeholder。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现的一个自定义Placeholder属性插件 - Python技术站

jQuery实现的一个自定义Placeholder属性插件

什么是Placeholder？

插件实现的过程

插件使用示例

示例一

示例二

相关文章