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


Posted in Javascript onOctober 16, 2019

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

主要实现了:

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

效果图

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

代码

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

Javascript 相关文章推荐
js中array的sort()方法使用介绍
Feb 20 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
微信小程序如何实现在线客服功能
Oct 16 #Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 #Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 #Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
JS使用正则表达式提交页面验证的代码
Oct 16 #Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 #Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JS中数组重排序方法
2016/11/11 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
Django之模型层多表操作的实现
2019/01/08 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Django--权限Permissions的例子
2019/08/28 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
启动一个线程是用run()还是start()
2016/12/25 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
2014年大学生自我评价
2014/01/19 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
校园元旦活动总结
2014/07/09 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers