使用JavaScrip模拟实现仿京东搜索框功能_七喜_前端开发者

使用js模拟实现京东的搜索框,主要用了js中的onfocus(注册焦点事件),onblur(失去焦点的事件);

主要实现了:

  1. 在鼠标点进去的时候,里面的默认内容消失;
  2. 在输入之后,再点击搜索框外,输入的内容还在搜索框中;
  3. 如果输入为空,点击搜索框外,里面自动显示默认内容;
  4. 内容颜色的改变

效果图

代码

<!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;/* 消除原来的边框默认属性 */
  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";//搜索框中默认的搜索词
  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";
   }
  }
  }
 </script>
 </head>
 <body>
 <div id="search">
  <input type="text" value="iphone 11" />
  <button>搜索</button>
 </div>
 </body>
</html>
  • onfocus事件:事件在对象获得焦点时发生,常用在表单中
  • onblur事件:事件在对象失去焦点时发生

css中的属性:outline用于修饰元素的轮廓;

总结

以上所述是小编给大家介绍的使用JavaScrip模拟实现仿京东搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对前端开发者网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

» 本文来自:前端开发者 » 《使用JavaScrip模拟实现仿京东搜索框功能_七喜_前端开发者》
» 本文链接地址:https://www.rokub.com/70809.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!