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

更新時間：2018年11月16日 15:17:47 作者：心所向在腳下

這篇文章主要為大家詳細介紹了js實現(xiàn)搜索欄效果，以及焦點問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下

小編這邊主要是介紹一個js中搜索欄的實現(xiàn)（沒有提交數(shù)據(jù)那些），重點在于對焦點問題的理解。

那么這邊小編就是要實現(xiàn)這樣的一個搜索框

對焦點的理解：

通俗來講當我們鼠標單擊一個盒子時光標停留在該盒子事件上實現(xiàn)用戶與欄之間的交互，這樣就表明該盒子獲取了焦點，以案例來說我們平常搜索欄點擊可以輸入文字，這個時候該搜索欄就獲得了焦點。

同理失去焦點也是同樣當點擊頁面其余位置時失去對先前盒子可以進行的操作。

那么直接以小編這個案例來說代碼如下：

CSS部分：

<style> 
 *{
  margin: 0;
  padding: 0;
 }
 input,button{
  border: 0 none;
  padding: 0;
  outline-style: none;
 }
 .search{
  margin: 100px auto;
  width: 258px;
  height: 40px;
  overflow: hidden;
 }
 .search input{
  float: left;
  width: 208px;
  height: 40px;
  background: url("left.jpg") no-repeat;
 
  padding-left:8px;
  color: #ccc;
 }
 .search button{
  float: left;
  height: 40px;
  width: 42px;
  background: url("right.jpg") no-repeat;
  cursor: pointer;
 } 
</style>
 
<body>
<div class="search">
 <input type="text" value="請輸入..." id="txt"> //盒子架構div中一個文本框一個按鈕
 <button id="btn"></button>
</div>
 
</body>

js部分：

<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   } //雖然該案例中這種獲取id方式比較麻煩但這是通常的一種方法避免一直去寫獲取
   $id("txt").onfocus=function () {
    if (this.value=="請輸入..."){
     this.value=""; //這邊是賦值別搞錯了
     this.style.color="#333"; //黑色
    }
   } //當用戶點擊時初始文字消失
   $id("txt").onblur=function () {
    if (this.value==""){
     this.value="請輸入..."
     this.style.color="#ccc"; //透明灰
    } //誰調用this指向誰
   }//當為空時用戶點擊其他地方顯示初始化狀態(tài)
  $id("btn").onclick=function () {
   alert("我可以點擊");
  } //這邊只是試驗一下按鈕功能還在不在
  }
 </script>

這邊另外介紹一些關于搜索欄實用方法：

1.進入頁面時搜索欄已經自動獲取了焦點

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

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

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

對象.事件=function(){

this.select();

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

常見的（點擊后全選）：

同時這邊應用到了文本框同樣也提及一下：

獲取文本框中內容：以value屬性獲取

獲取標簽中內容：innerHTML屬性獲取

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

當然的我們在站中看到的搜索框有更完善的

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

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

話不多說擼上代碼（以小編做的那個簡單的導航框實現(xiàn)）：

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

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

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

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

<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   }
   $id("txt").oninput=function () { //判斷用戶輸入欄是否為空來使得label是否消失
 
    if (this.value==""){
     $id("lab").style.display="block";
    }
    else {
     $id("lab").style.display="none";
    }
   }
 
  }
 </script>

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