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

这似乎不是解决此问题的最佳方法。之前我在博客上看过如下的解决方案。您可以将placeholder属性添加到输入中，以便它们可以在现代浏览器上运行，并将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()处理程序将使默认文本不会作为值发布。

也许我应该谈谈我觉得你的代码有什么问题：

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

Answer 2

忘记var formId，而是在输入/ textarea html标记中添加属性数据占位符，并使用适当的值，然后：

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

用jquery替换占位符

2 个答案: