脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 京东搜索框

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

 更新时间：2019年10月16日 11:40:09   作者：whr瑞  
使用js模拟实现京东的搜索框，主要用了js中的onfocus(注册焦点事件)，onblur(失去焦点的事件)；本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

使用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模拟实现仿京东搜索框功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • namespace.js Javascript的命名空间库

    namespace.js Javascript的命名空间库

    命名空间的好处已经耳熟能详，但是JS中并没有原生态支持命名空间，这个库就是为js提供命名空间的功能。
    2011-10-10
  • es7学习教程之Decorators（修饰器）详解

    es7学习教程之Decorators（修饰器）详解

    这篇文章主要给大家介绍了关于es7中Decorators（修饰器）的相关资料，文中通过示例代码给大家介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • 利用uni-app和uView实现多图上传功能全过程

    利用uni-app和uView实现多图上传功能全过程

    最近在使用uniapp开发的微信小程序中使用了图片上传功能,下面这篇文章主要给大家介绍了关于利用uni-app和uView实现多图上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • JavaScript立即执行函数与函数劫持的作用

    JavaScript立即执行函数与函数劫持的作用

    IIFE全拼Imdiately Invoked Function Expression,是一个在定义的时候就立即执行的JavaScript函数,这篇文章主要给大家介绍了关于Javascript立即执行函数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • uniapp打包成微信小程序的详细过程

    uniapp打包成微信小程序的详细过程

    微信小程序的出现给我们提供了一种使用应用的新方式和体验,下面这篇文章主要给大家介绍了关于uniapp打包成微信小程序的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • JS选中checkbox后获取table内一行TD所有数据的方法

    JS选中checkbox后获取table内一行TD所有数据的方法

    这篇文章主要介绍了JS选中checkbox后获取table内一行TD所有数据的方法,涉及javascript针对table元素遍历与获取的技巧,需要的朋友可以参考下
    2015-07-07
  • javascript数据类型详解

    javascript数据类型详解

    本文介绍了对javascript数据类型；隐式转换 （+ 和 -，== 和 ===）；包装对象等相关知识进行详细介绍，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • js 用CreateElement动态创建标签示例

    js 用CreateElement动态创建标签示例

    用CreateElement动态创建标签，主要是html中常用的一些标签，在本文有详细的示例，喜欢的朋友可以参考下
    2013-11-11
  • Scala解析Json字符串的实例详解

    Scala解析Json字符串的实例详解

    这篇文章主要介绍了 Scala解析Json字符串的实例详解的相关资料,希望通过本文能帮助到大家，让大家学习理解这部分内容，需要的朋友可以参考下
    2017-10-10
  • JS中令人发指的valueOf方法介绍

    JS中令人发指的valueOf方法介绍

    近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍真是令人发指啊,不可思议的朋友可以参考下啊
    2013-02-02

最新评论