jQuery添加默認文本到搜索輸入框

>使用jQuery增強您的搜索框：一個簡單而有效的指南！本教程演示瞭如何在搜索框中添加默認文本，從而使其更加用戶友好。 該解決方案確保默認文本在單擊時消失，框為空時重新出現，並在懸停時提供視覺反饋。

>請參閱Live Demo

這是JavaScript代碼：

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

此jQuery代碼使用blur>事件來檢查用戶與之交互後的搜索框是否為空。如果為空，它將設置默認文本。

> HTML結構（未詳細顯示）應簡單地包含一個具有ID“搜索”的輸入字段的表單。 。

>下面的CSS樣式提供了視覺增強：

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

>此CSS控制懸停的不透明度，刪除默認表單樣式，並為輸入字段和搜索按鈕設置尺寸和样式。 >

>經常詢問的問題（常見問題解答）添加默認文本以搜索輸入

本節介紹有關將默認文本添加到搜索輸入字段中的常見問題，涵蓋了HTML和CSS方法。 原始的常見問題解答部分被保留，但為了清晰和簡潔而改寫。 包括有益的特定代碼示例。

>

html佔位符屬性

>使用html

屬性來添加默認文本的簡單方法。 例如：

。 佔位符文本將隨著用戶類型而消失。 placeholder> 帶有CSS <input type="search" placeholder="Enter search term...">的樣式佔位符文本

使用CSS控制佔位符文本的顏色：

>此示例將佔位符文本設置為紅色。 請記住，瀏覽器對

的支持變化；您可能需要較舊瀏覽器的供應商前綴。

input::placeholder {
  color: red;
}

>默認文本的javascript::placeholder

>

屬性通常就足夠了，您可以使用JavaScript動態管理默認文本。 上面提供的jQuery示例就是一種這樣的方法。

添加圖標placeholder

>使用CSS的

和

>屬性在搜索框中添加圖標。

background-image>在焦點上擴展搜索框 background-position>在CSS中使用 pseudo-class在搜索框中獲得焦點時展開搜索框：

>清除按鈕樣式

:focus造型內置的清除按鈕需要由於偽元素的不同而需要特定於瀏覽器的CSS。 對於Webkit瀏覽器（Chrome，Safari），您可以使用：>

input[type="search"]:focus {
  width: 200px;
}

表格在Enter鍵

上提交

確保搜索框在

>元素內，以自動在按下Enter鍵時自動提交表單。

>頁面上的自動對焦

>在頁面加載時使用autofocus>元素上的<input>屬性自動聚焦搜索框

以上是jQuery添加默認文本到搜索輸入框的詳細內容。更多資訊請關注PHP中文網其他相關文章！