欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

這篇文章主要介紹了js如何實(shí)現(xiàn)搜索欄效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供臨夏網(wǎng)站建設(shè)、臨夏做網(wǎng)站、臨夏網(wǎng)站設(shè)計(jì)、臨夏網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、臨夏企業(yè)網(wǎng)站模板建站服務(wù)，10余年臨夏做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

JS是什么

JS是JavaScript的簡(jiǎn)稱，它是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開(kāi)發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁(yè)更加美觀。

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

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

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

對(duì)焦點(diǎn)的理解：

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

同理失去焦點(diǎn)也是同樣當(dāng)點(diǎn)擊頁(yè)面其余位置時(shí)失去對(duì)先前盒子可以進(jìn)行的操作。

那么直接以小編這個(gè)案例來(lái)說(shuō)代碼如下：

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="請(qǐng)輸入..." id="txt"> //盒子架構(gòu)div中一個(gè)文本框一個(gè)按鈕
 <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=="請(qǐng)輸入..."){
     this.value=""; //這邊是賦值別搞錯(cuò)了
     this.style.color="#333"; //黑色
    }
   } //當(dāng)用戶點(diǎn)擊時(shí)初始文字消失
   $id("txt").onblur=function () {
    if (this.value==""){
     this.value="請(qǐng)輸入..."
     this.style.color="#ccc"; //透明灰
    } //誰(shuí)調(diào)用this指向誰(shuí)
   }//當(dāng)為空時(shí)用戶點(diǎn)擊其他地方顯示初始化狀態(tài)
  $id("btn").onclick=function () {
   alert("我可以點(diǎn)擊");
  } //這邊只是試驗(yàn)一下按鈕功能還在不在
  }
 </script>

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

1.進(jìn)入頁(yè)面時(shí)搜索欄已經(jīng)自動(dòng)獲取了焦點(diǎn)

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

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

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

對(duì)象.事件=function(){

    this.select();

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

常見(jiàn)的（點(diǎn)擊后全選）：

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

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

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

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

搜索欄在實(shí)戰(zhàn)中運(yùn)用還是很多的，這邊主要是對(duì)于焦點(diǎn)問(wèn)題的一個(gè)介紹，當(dāng)然獲取焦點(diǎn)方法不止這單單一種，之后小編會(huì)補(bǔ)充。     

當(dāng)然的我們?cè)谡局锌吹降乃阉骺蛴懈晟频?/p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

分享題目：js如何實(shí)現(xiàn)搜索欄效果
分享路徑：http://chinadenli.net/article32/gieesc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、微信公眾號(hào)、網(wǎng)站維護(hù)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司