使用JavaScrip模拟实现仿京东搜索框功能

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

主要实现了：

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

效果图

代码

 
 
 
 
  *{
  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;
  color: #888;
  }
  #search button{
  width: 50px;
  height: 35px;
  background-color: #f10215;
  float: left;
  color: white;
  }
 
 
 
 
 
  
  搜索
 
 

• onfocus事件：事件在对象获得焦点时发生,常用在表单中
• onblur事件：事件在对象失去焦点时发生

css中的属性：outline用于修饰元素的轮廓；

总结

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