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