DIV CSS 佈局教程網

【解決方案】

　　1. 准備工作

　　（1）輸入框
代碼如下:
<input type="text" name="searchText" title="請輸入搜索關鍵字" />

　　（2）CSS代碼
代碼如下:
input.helpText { color: #aaa;}

（3）轉換方法
代碼如下:
function switchText()
{
if ($(this).val() == $(this).attr('title'))
$(this).val('').removeClass('helpText');
else if ($.trim($(this).val()) == '')
$(this).addClass('helpText').val($(this).attr('title'));
}

（4）具體實現
代碼如下:
$('input[type=text][title!=""]').each(function() {
if ($.trim($(this).val()) == '') $(this).val($(this).attr('title'));
if ($(this).val() == $(this).attr('title')) $(this).addClass('helpText');
}).focus(switchText).blur(switchText);

$('form').submit(function() {
$(this).find('input[type=text][title!=""]').each(function() {
if ($(this).val() == $(this).attr('title')) $(this).val('');
});
});

2. 參考文章
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/