0

我正在为该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在每个输入字段中重新填充值。我尝试了不同的解决方案，但这与我已经接近了。有人知道吗？

4

2 回答 2

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('');
    }
  })
});

我现在找不到博客，这很遗憾，因为我相信这段代码完全是从那个站点复制的，并且工作得很好，跨浏览器。

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

无需在每个 input 和 textarea 元素上放置处理程序，您可以轻松地准确过滤哪些应该有处理程序：那些具有占位符属性的处理程序。

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

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

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

于 2013-02-08T16:42:26.853 回答
0

忘记了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"));
    }
});
于 2013-02-08T16:43:40.417 回答