用 jquery 替换占位符

Question

我正在为 placeholder 问题创建一个解决方案，以使其在仅使用 jquery 的每个浏览器中都能正常工作。

到目前为止，它的工作良好...... 这就是我已经走了多远

var formId = ["Name", "E-mail", "Subject", "Message"];
$.each(formId, function(i) {
    $("input, textarea").focus(function() {
        if ($(this).val() === formId[i])
            $(this).val("");
    }).focusout(function() {
        if ($(this).val() === "")
            $(this).val(formId[i]);
    });
});

它工作完美，直到焦点输出部分。当我关注输入字段时，它会在每个输入字段中使用Name 重新填充值。我尝试了不同的解决方案，但这是我得到的最接近的结果。有人知道吗？

Answer 1

这似乎不是解决这个问题的最佳方法。我之前在博客上看到过类似以下的解决方案。您将占位符属性添加到输入，因此它们将在现代浏览器上运行，并且您将 jQuery 添加到具有占位符属性的输入，例如 [placeholder]:

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

我现在找不到博客，很遗憾，因为我相信这段代码完全是从那个网站复制而来的，而且效果很好，可以跨浏览器使用。

这是如何工作的，以及为什么这是一种更好的方法：

您无需在每个输入和 textarea 元素上都放置处理程序，而是可以轻松准确地筛选出哪些应该有处理程序：那些有占位符属性的。

.submit() 处理程序将阻止默认文本作为值发布。

也许我应该谈谈我认为您的代码存在的问题：

您正在使用 each 函数来调用多个非常相似的焦点处理程序。您可能不需要 each 功能。您可以只使用 $('input, textarea').focus() 因为这将为每个输入添加一个处理程序。然后，您可以检查是否$.inArray($(this).val(),formId)。 inArray() 的文档。

Answer 2

忘记var formId，而是在您的 input/textarea html 标记中添加一个属性 data-placeholder 并使用适当的值，然后：

 $("input, textarea").on({
    focus : function() {
      var $t=$(this);
      if ($t.val() ===$t.data("placeholder"))
        $t.val("");
    }, 
    blur : function() {
      var $t=$(this);
      if ($t.val() === "")
        $t.val($t.data("placeholder"));
    }
});