html5為web的form表單增強了一個功能,他就是input的佔位符--placeholder。佔位符的作用是,當input內容為空或沒有被聚焦的時候,input顯示佔位符的內容。這是個很棒的功能,但不是所有的瀏覽器都支援。本教學將向你介紹,如何使用 Modernizr 類別庫去判斷瀏覽器是否支援該屬性,然後使用jquery動態顯示佔位符。
以前使用JavaScript實作的方式
在沒有placeholder屬性的日子裡,我們使用javascript去模擬他的實作。在下面的例子裡,我們在input中加入了一個value屬性。 input聚焦的時候,我們判斷value的值是否是‘search’,是的話就清空內容。當input失去焦點的時候,我們判斷內容是否為空,為空就將value設定為‘search’。
<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="Search"</span><span style="color: #ff0000;"> <a href="http://www.php.cn/wiki/1465.html" target="_blank">onfocus</a></span><span style="color: #0000ff;">="<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a> (this.value == 'Search') {this.value = '';}"</span><span style="color: #ff0000;"> <br/> <a href="http://www.php.cn/wiki/1463.html" target="_blank">onblur</a></span><span style="color: #0000ff;">="if (this.value == '') {this.value = 'Search';}" /</span><span style="color: #0000ff;">></span>
現在使用html5的placeholder,從語意上來說,他比value屬性更能表達我們的意圖。但不是所有瀏覽器都支援這個屬性,所以我們需要藉助 Modernizr and jQuery 來幫助我們。
Modernizr用來判斷瀏覽器是否支援placeholder屬性,如果不支持,則執行jquery語句。他會把所有包含placeholder屬性的html元素找出來,並且把他存在變數中。在元素獲得和失去焦點的時候,腳本會判斷value值和placeholder值,來決定value值最終的內容。
如果你想在自己的網站中使用這個功能,需要下載modernizr和jquery類別庫,並保證他們的引用位址正確。
<script src="jquery.js"></script> <script src="modernizr.js"></script> <script>(!'[placeholder]').focus( input = $( (input.val() == input.attr('placeholder''''placeholder' input = $( (input.val() == '' || input.val() == input.attr('placeholder''placeholder''placeholder''[placeholder]') .parents('form').submit().find('[placeholder]').each( input = $( (input.val() == input.attr('placeholder'''</script>
webkit瀏覽器為搜尋框添加了額外的樣式,我們需要使用下面的腳本去移出他。
input[type=search] { -webkit-appearance: none;}input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; }
好了,本課程到此為止。
以上是HTML5實踐-實作跨瀏覽器HTML5文字佔位符-placeholder的具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!