使用JavaScrip模擬實現(xiàn)仿京東搜索框功能

更新時間：2019年10月16日 11:40:09 作者：whr瑞

使用js模擬實現(xiàn)京東的搜索框，主要用了js中的onfocus(注冊焦點事件)，onblur(失去焦點的事件)；本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧

使用js模擬實現(xiàn)京東的搜索框，主要用了js中的onfocus(注冊焦點事件)，onblur(失去焦點的事件)；

主要實現(xiàn)了：

在鼠標(biāo)點進(jìn)去的時候，里面的默認(rèn)內(nèi)容消失；
在輸入之后，再點擊搜索框外，輸入的內(nèi)容還在搜索框中；
如果輸入為空，點擊搜索框外，里面自動顯示默認(rèn)內(nèi)容；
內(nèi)容顏色的改變

效果圖

代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>京東搜索框</title>
 <style type="text/css">
  *{
  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;/* 消除原來的邊框默認(rèn)屬性 */
  float: left;
  padding-left: 4px;/* 讓文字在搜索的時候距離框4px */
  color: #888;
  }
  #search button{
  width: 50px;
  height: 35px;
  background-color: #f10215;
  float: left;
  color: white;
  }
 </style>
 <script type="text/javascript">
  var keyword = "iphone 11";//搜索框中默認(rèn)的搜索詞
  window.onload = function(){
  //得到按鈕的對象
  var btnsearch = document.getElementById("search").getElementsByTagName("button")[0];
  //得到搜索框的對象
  var txt = document.getElementById("search").getElementsByTagName("input")[0];
  //為搜索框注冊焦點事件
  txt.onfocus = function(){
   //當(dāng)在焦點上時讓搜索框文字變成黑色
   txt.style.color = "black";
   //如果搜索框為關(guān)鍵字的時候,注冊焦點就讓搜索框為空
   if (txt.value == keyword) {
   txt.value = "";
   }
  }
  //為搜索框注冊失去焦點事件
  txt.onblur = function(){
   //在失去焦點的時候如果搜索框內(nèi)容為空,就讓搜索框顯示默認(rèn)關(guān)鍵字
   if (txt.value == "") {
   this.value = keyword;
   this.style.color = "#888";
   }
  }
  }
 </script>
 </head>
 <body>
 <div id="search">
  <input type="text" value="iphone 11" />
  <button>搜索</button>
 </div>
 </body>
</html>