JavaScript搜尋欄實現(焦點問題)
小編這邊主要是介紹一個js中搜索欄的實現（沒有提交資料那些），重點在於對焦點問題的理解。
那麼這邊小編就是要實現這樣的一個搜尋框
對焦點的理解：
通俗來講當我們滑鼠單擊一個盒子時游標停留在該盒子事件上實現使用者與欄之間的互動，這樣就表明該盒子獲取了焦點，以案例來說我們平常搜尋欄點選可以輸入文字，這個時候該搜尋欄就獲得了焦點。
同理失去焦點也是同樣當點選頁面其餘位置時失去對先前盒子可以進行的操作。
那麼直接以小編這個案例來說程式碼如下：
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指向誰 }//當為空時使用者點選其他地方顯示初始化狀態 $id("btn").onclick=function () { alert("我可以點選"); } //這邊只是試驗一下按鈕功能還在不在 } </script>
這邊另外介紹一些關於搜尋欄實用方法：
1.進入頁面時搜尋欄已經自動獲取了焦點
那麼在js之中我們只需要將物件加上 物件.focus();
方法就可以實現進入頁面時游標已經顯示在新增該方法的物件上。
2.滑鼠進過（或點選搜尋框）搜尋欄搜尋欄內容被全選（該方法方便使用者輸入後滑鼠經過可以直接刪除搜尋欄所有，當不想刪除所有時使用者可以點選在進行一個一個刪除操作）
物件.事件=function(){
this.select();
} //這樣就更便捷使用者的刪除操作
常見的（點選後全選）：
同時這邊應用到了文字框同樣也提及一下：
獲取文字框中內容：以value屬性獲取
獲取標籤中內容：innerHTML屬性獲取
搜尋欄在實戰中運用還是很多的，這邊主要是對於焦點問題的一個介紹，當然獲取焦點方法不止這單單一種，之後小編會補充。
當然的我們在站中看到的搜尋框有更完善的
我們看一下京東的搜尋框，這邊只是舉例那麼現在很多都是用到這樣的搜尋框，獲取焦點以後框內文字還是有顯示但你一輸入內容他就消失了。那麼怎樣實現這樣的搜尋框呢？
首先我們明確一點，類似這樣的搜尋框顯示的文字並非是文字框的value值
話不多說擼上程式碼（以小編做的那個簡單的導航框實現）：
首先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>效果圖如下，若輸入則淺文字消失
當然小編這個案例考慮到了一些相容性問題，如果是在IE9後的瀏覽器用H5有的方法直接給文字框加上一個屬性就可以實現這樣的效果。