[ HTML5!Bonjour! ] placeholder屬性 - 欄位提示文字
網頁表單製作的時候，都會在欄位上填入提示文字，指引使用者填寫。提示文字以往都要配合JavaScript來達成focus欄位時，提示消失的效果。HTML5多了placeholder這個屬性，可以讓設計師直接達成這樣的效果。
網頁表單製作的時候，都會在欄位上填入提示文字，指引使用者填寫。提示文字以往都要配合JavaScript來達成focus欄位時，提示消失的效果。HTML5多了placeholder這個屬性，可以讓設計師直接達成這樣的效果。
<input id="inp1" type="text" placeholder="請填入關鍵字"/>
但很可惜的，此項方便的功能IE並不支援，所以還是需要程式的支援來讓IE也有相同的瀏覽效果，在網路上有找到不錯的jQurey作法，下面提供給大家參考。
原始文章 "HTML5 Placeholder Input Fields Fixed with jQuery" - by Nico Hagenburger
作法的原理是利用input的value屬性，讓value為空的時候，內容等於placeholder的內容，同時加上特別的class來呈現placeholer的樣式，原始語法如下。
$('[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();
由於把value的內容填入的placeholder的文字，在送出表單時，會同時送出，所以要檢查，當value與placeholder呈現的文字相同時，在送出前，要把value清空，才不會送出提示字。
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
利用簡單的jQuery就可以達成跨瀏覽器的placeholder效果了!大家試試看吧!
placeholder.htm