プレースホルダー効果を得るために、html 5 で提供されるプレースホルダー属性を使用しています。
<input id="search" class="hasPlaceholder" type="text" placeholder="Personal Trainer"
value="" name="search">
また、送信時に placeolder をクリアするコードを追加しました。
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder'));
$(this).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() {
var input = $(this);
input.removeClass('hasPlaceholder');
if (input.val() == input.attr('placeholder')) {
input.removeAttr('placeholder');
input.val("");
}
});
});
}
});
ただし、送信後にプレースホルダー値が提供されます。