jQuery实现为控件添加水印文字效果(附源码)

下面我来详细讲解“jQuery实现为控件添加水印文字效果(附源码)”的完整攻略。

问题描述

在一些表单控件上，我们需要显示一些提示信息，比如输入框中的placeholder属性等，这些信息起到的作用就像是一个水印，非常方便用户进行操作。我们可以使用jQuery来实现这种水印效果，让表单控件更加美观、易用。

解决方案

为了实现这种效果，我们需要给表单控件添加一个事件来移除水印，还要添加一个事件来添加水印。具体实现的代码如下：

(function($) {
  $.fn.watermark = function(text) {
    return this.each(function() {
      var $this = $(this);
      if ($this.val() === "" || $this.val() === text) {
        $this.val(text).addClass("watermark");
      }

      $this.focus(function() {
        if ($this.val() === text) {
          $this.val("").removeClass("watermark");
        }
      }).blur(function() {
        if ($this.val() === "" || $this.val() === text) {
          $this.val(text).addClass("watermark");
        }
      });
    });
  };
})(jQuery);

其中，我们首先对jQuery进行扩展，添加了一个名为watermark的方法，这个方法接受一个参数text，表示水印的文字内容。在该方法中，我们对每个被选中的控件分别进行操作。如果该控件的值为空或者就是text，则为其添加class为watermark的样式，并将其值设置为text。同时，我们还为其添加了focus和blur事件，当控件获得焦点后，如果其值为text，则将其清空并移除水印样式。当控件失去焦点后，如果其值为空或为text，则将其值设置为text并添加水印样式。

我们可以通过以下代码来使用该水印效果：

$(function() {
  $("input[type='text'], input[type='password']").watermark("请输入内容");
});

该代码会选中所有类型为text或password的input控件，并为其添加"请输入内容"的水印效果。

示例说明

示例1

假如我们有一个表单控件，希望设置一个水印效果来提示用户输入内容。我们可以在该控件所在页面中添加如下代码：

<input type="text" id="input1">

而在js代码中，我们可以这样调用：

$("#input1").watermark("请输入内容");

这样即可为该控件添加一个“请输入内容”的水印效果。

示例2

假如我们还有一个密码输入框，我们也想为它添加类似的水印效果，但是希望水印文字为“请输入密码”。我们可以将html代码修改为：

<input type="password" id="pass">

而在js代码中，我们可以这样调用：

$("#pass").watermark("请输入密码");

这样即可为该密码框添加一个“请输入密码”的水印效果。

总结

通过上述的操作，我们成功地为表单控件添加了一个水印文字效果，让表单控件更加易用、美观。如果您希望为其他类型的控件添加该效果，只需要将代码中的"input[type='text'], input[type='password']"替换成自己需要的类型即可。