譯自：[http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text](http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text) 譯者：蔣宇捷，轉載請標明出處（http://blog.csdn.net/hfahe） ? HTML5表單的最大優點之一是可以為輸入區域添加占位符文字。占位符屬性允許可以為一個空的或者沒有焦點的表單輸入框顯示文本，在獲得焦點后消失。這是一個非常不錯的特性，但是還不被所有的瀏覽器所支持。這個教程將向你展示如何使用Modernizr來檢測瀏覽器是否支持占位符，否則使用jQuery來動態的顯示兼容性的占位符文本。 **示例** **[源碼下載](http://webdesignerwall.com/file/html5-placeholder.zip)** **最原始的**Javascript**方式** ??在擁有占位符屬性之前，我們依靠Javascript來制造占位符文本。下面是一個例子，文本被添加到value屬性。當獲得焦點后，它會檢查值是否是“search”并返回空來清空輸入框。如果值為空，它返回“search”。就像你看到的一樣，這個方式并沒有太大的效率，因為必須要檢查每一個輸入區域。 <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">? **jQuery**占位符**(**示例**)** ??現在使用HTML5占位符，比起value屬性更加語義化。但是，占位符屬性還不被所有的瀏覽器所支持。為了支持所有瀏覽器，使用[Modernizr](http://www.modernizr.com/)和[jQuery](http://jquery.com/)相當方便。Modernizr使用來檢測是否支持占位符屬性。如果不支持placeholder，將運行jQuery代碼。它尋找所有擁有占位符屬性的元素并存儲在一個變量里。然后它比較輸入值和占位符的值。如果輸入值為空，將顯示占位符文本并為輸入區域添加一個“placeholder”類。看看[示例](http://webdesignerwall.com/demo/html5-placeholder-text)。要在你的站點上使用，下載Modernizr和jQuery庫并粘貼下面的代碼到你的HTML頁面里（確保jQuery.js和modernizr.js文件在正確的路徑下）。 ~~~ <mce:script src="jquery.js" mce_src="jquery.js"></mce:script><mce:script src="modernizr.js" mce_src="modernizr.js"></mce:script> $(document).ready(function(){ if(!Modernizr.input.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(''); } }) }); } </script>? ~~~ **移除**Webkit Search**輸入框的樣式** ??Webkit瀏覽器為search輸入框添加了額外的樣式。要移除它們，添加如下的CSS代碼： ~~~ input[type=search] { -webkit-appearance: none; // 譯者注：取消Webkit瀏覽器默認樣式} input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button { display: none;}? ~~~  **貢獻** ??jQuery代碼來自[Nico Hagenburger](http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html).