js如何實現(xiàn)搜索欄效果

 


  //盒子架構(gòu)div中一個文本框一個按鈕
 

js部分：

這邊另外介紹一些關(guān)于搜索欄實用方法：

1.進入頁面時搜索欄已經(jīng)自動獲取了焦點

那么在js之中我們只需要將對象加上  對象.focus();

方法就可以實現(xiàn)進入頁面時光標(biāo)已經(jīng)顯示在添加該方法的對象上。

2.鼠標(biāo)進過（或點擊搜索框）搜索欄搜索欄內(nèi)容被全選（該方法方便用戶輸入后鼠標(biāo)經(jīng)過可以直接刪除搜索欄所有，當(dāng)不想刪除所有時用戶可以點擊在進行一個一個刪除操作）

對象.事件=function(){

    this.select();

}  //這樣就更便捷用戶的刪除操作

常見的（點擊后全選）：

同時這邊應(yīng)用到了文本框同樣也提及一下：

獲取文本框中內(nèi)容：以value屬性獲取

獲取標(biāo)簽中內(nèi)容：innerHTML屬性獲取

搜索欄在實戰(zhàn)中運用還是很多的，這邊主要是對于焦點問題的一個介紹，當(dāng)然獲取焦點方法不止這單單一種，之后小編會補充。     

當(dāng)然的我們在站中看到的搜索框有更完善的

我們看一下京東的搜索框，這邊只是舉例那么現(xiàn)在很多都是用到這樣的搜索框，獲取焦點以后框內(nèi)文字還是有顯示但你一輸入內(nèi)容他就消失了。那么怎樣實現(xiàn)這樣的搜索框呢？

首先我們明確一點，類似這樣的搜索框顯示的文字并非是文本框的value值

話不多說擼上代碼（以小編做的那個簡單的導(dǎo)航框?qū)崿F(xiàn)）：

首先div中我們加上了label標(biāo)簽，也就是我們點擊后看到的文字

然后給他加上CSS屬性（注意label標(biāo)簽只能以定位的方式定位到文本框中）：

.search label {
  font-size: 12px;
  color:#ccc;
  position: absolute; /*以絕對定位來定位label到文本框合適位置當(dāng)然同時也要為父親div盒子加上相對定位*/
  top:12px;
  left:12px;
  cursor: text; /*使鼠標(biāo)放到lable文字上時還是光標(biāo)*/
 }

那么這樣的話js部分有很大差異：

效果圖如下，若輸入則淺文字消失

當(dāng)然小編這個案例考慮到了一些兼容性問題，如果是在IE9后的瀏覽器用H5有的方法直接給文本框加上一個屬性就可以實現(xiàn)這樣的效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何實現(xiàn)搜索欄效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!