javascript - 需要帮助将此内联 javascript 转换为 jQuery 函数

Question

我有以下 HTML/JS，它显示一个初始值，当您单击输入字段时将其删除，然后如果您不输入任何内容，则用原始值重新填充它。

我需要在同一页面上的多个输入字段上执行此操作，因此希望将其转换为 jQuery 函数，然后我可以将其应用于具有特定类的任何输入字段。

<input type="text" name="search" value="Search by name" onfocus="if (this.value == 'Search by name') {this.value = '';this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Search by name';this.style.color = '#aaa';}" />

Answer 1

首先，让你的生活更轻松，给输入一个类:

<input type="text" class="search" name="search">

您可以使用属性选择器:

$(":text[name='search']")...

但这快得多:

$("input.search")...

然后使用这个:

$(function() {
  $("input.search").focus(function() {
    this.defaultval = this.defaultval || $(this).val();
    if ($(this).val() == this.defaultval) {
      $(this).val("").css("color", "#000");
    }
  }).blur(function() {
    if ($(this).val() == "") {
      $(this).val(this.defaultval).css("color", "#AAA");
    }
  });
});