溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js如何實現搜索欄效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
小編這邊主要是介紹一個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有的方法直接給文本框加上一個屬性就可以實現這樣的效果。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“js如何實現搜索欄效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
