在两个文本框中显示文本框提示

I use this jquery function to display a textbox hint

我使用这个jquery函数来显示文本框提示

this is function

这是功能

function textboxHint(id, options) {
    var o = { selector: 'input:text[title]', blurClass:'blur' };
    $e = $('#'+id);
    $.extend(true, o, options || {});

    if ($e.is(':text')) {
      if (!$e.attr('title')) $e = null;
    } else {
      $e = $e.find(o.selector);
    }
    if ($e) {
      $e.each(function() {
      var $t = $(this);
      if ($.trim($t.val()).length == 0) { $t.val($t.attr('title')); }
      if ($t.val() == $t.attr('title')) {
    $t.addClass(o.blurClass);
      } else {
        $t.removeClass(o.blurClass);
      }

     $t.focus(function() {
    if ($.trim($t.val()) == $t.attr('title')) {
      $t.val('');
      $t.removeClass(o.blurClass);
    }
    }).blur(function() {
      var val = $.trim($t.val());
      if (val.length == 0 || val == $t.attr('title')) {
        $t.val($t.attr('title'));
        $t.addClass(o.blurClass);
      }
    });

         // empty the text box on form submit               
    $(this.form).submit(function(){
      if ($.trim($t.val()) == $t.attr('title')) $t.val('');
    });
   });
 }
}

this is html

这是HTML

<form action="" method="" class="search" >
    <input type="text"  name="search" class="text"  title="Search Subjects..." id="block" />
    <input type="submit"  name="submit"  value="Search" class="submit" />
</form>

I called function like this..

我打电话给这样的功能..

$(document).ready(function() {
    textboxHint("block");
});

This is working.. but the problem is now I need to use this function to display a hint in two different text box with two different Ids. Eg: Id = block1 and Id = block2 etc...

这工作..但问题是现在我需要使用此功能在两个不同的文本框中显示提示与两个不同的ID。例如:Id = block1和Id = block2等......

Can anybody help me in modifying this function to do this?

任何人都可以帮我修改这个功能吗?

2 个解决方案

#1

What about this:

那这个呢:

$(document).ready(function() {
    textboxHint("block1");
    textboxHint("block2");
    textboxHint("block3");
});

As you can see, since the function ask for id as an argument, you can supply different id by calling the function more than once.

正如您所看到的,由于函数要求id作为参数,您可以通过多次调用函数来提供不同的id。

Regards

#2

How about modifying the function to receive a selector and loop through each elements:

如何修改函数以接收选择器并遍历每个元素:

function textboxHint(selector, options) {
    $(selector).each(function(){
        var o = { selector: 'input:text[title]', blurClass:'blur' };
        $e = this;
        $.extend(true, o, options || {});

        if ($e.is(':text')) {
          if (!$e.attr('title')) $e = null;
        } else {
          $e = $e.find(o.selector);
        }
        if ($e) {
          $e.each(function() {
          var $t = $(this);
          if ($.trim($t.val()).length == 0) { $t.val($t.attr('title')); }
          if ($t.val() == $t.attr('title')) {
        $t.addClass(o.blurClass);
          } else {
            $t.removeClass(o.blurClass);
          }

         $t.focus(function() {
        if ($.trim($t.val()) == $t.attr('title')) {
          $t.val('');
          $t.removeClass(o.blurClass);
        }
        }).blur(function() {
          var val = $.trim($t.val());
          if (val.length == 0 || val == $t.attr('title')) {
            $t.val($t.attr('title'));
            $t.addClass(o.blurClass);
          }
        });

             // empty the text box on form submit               
        $(this.form).submit(function(){
          if ($.trim($t.val()) == $t.attr('title')) $t.val('');
        });
       });
    }   
    });
}

And calling it like:

并称之为:

<form action="" method="" class="search" >
    <input type="text"  name="search" class="text"  title="Search Subjects..." class="block" id="block1" />
    <input type="text"  name="search" class="text"  title="Search Subjects..." class="block" id="block2" />
    <input type="submit"  name="submit"  value="Search" class="submit" />
</form>

$(document).ready(function() {
    textboxHint(".block");
});

#1