這篇文章給大家介紹使用JavaScrip怎么實現一個搜索框功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯長期為1000多家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態(tài)環(huán)境。為射洪企業(yè)提供專業(yè)的成都網站建設、做網站，射洪網站改版等技術服務。擁有十余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

Java的特點有哪些

Java的特點有哪些 1.Java語言作為靜態(tài)面向對象編程語言的代表，實現了面向對象理論，允許程序員以優(yōu)雅的思維方式進行復雜的編程。 2.Java具有簡單性、面向對象、分布式、安全性、平臺獨立與可移植性、動態(tài)性等特點。 3.使用Java可以編寫桌面應用程序、Web應用程序、分布式系統和嵌入式系統應用程序等。

代碼

 
 
 
 
  *{
  margin: 0;
  padding: 0;
  border: 0;
  }
  #search{
  width: 550px;
  height: 35px;
  margin: 100px auto;
  }
  #search input{
  width: 492px;
  height: 31px;
  border: 2px solid #f10215;
  outline-style: none;/* 消除原來的邊框默認屬性 */
  float: left;
  padding-left: 4px;/* 讓文字在搜索的時候距離框4px */
  color: #888;
  }
  #search button{
  width: 50px;
  height: 35px;
  background-color: #f10215;
  float: left;
  color: white;
  }
 
 
  var keyword = "iphone 11";//搜索框中默認的搜索詞
  window.onload = function(){
  //得到按鈕的對象
  var btnsearch = document.getElementById("search").getElementsByTagName("button")[0];
  //得到搜索框的對象
  var txt = document.getElementById("search").getElementsByTagName("input")[0];
  //為搜索框注冊焦點事件
  txt.onfocus = function(){
   //當在焦點上時讓搜索框文字變成黑色
   txt.style.color = "black";
   //如果搜索框為關鍵字的時候,注冊焦點就讓搜索框為空
   if (txt.value == keyword) {
   txt.value = "";
   }
  }
  //為搜索框注冊失去焦點事件
  txt.onblur = function(){
   //在失去焦點的時候如果搜索框內容為空,就讓搜索框顯示默認關鍵字
   if (txt.value == "") {
   this.value = keyword;
   this.style.color = "#888";
   }
  }
  }
 
 
 
 
  
  搜索