用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元素上的相反，你可以很容易地过滤究竟哪些应该对他们的处理程序：那些有占位符属性。

A .submit()处理程序将保留默认文本作为值发布。

也许我应该上什么，我觉得讲的问题与您的代码：

您使用的每个函数调用多个重点处理，这是非常相似的。你可能不需要每个功能。你可以使用$（'input，textarea'）。focus（），因为它会为每个输入添加一个处理程序。然后，你可以检查$.inArray($(this).val(),formId)。 Doc 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")); 
    } 
});