使用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 相关文章推荐
Cookie 小记
Apr 01 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
详解JavaScript函数
Dec 01 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
js实现自定义滚动条的示例
Oct 27 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
神族 PROTOSS 概述
2020/03/14 星际争霸
1 Tube Radio
2021/03/02 无线电
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
python实现排序算法
2014/02/14 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
如何利用python发送邮件
2020/09/26 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
Linux内核产生并发的原因
2016/11/08 面试题
中英文自我评价常用句型
2013/12/19 职场文书
高二英语教学反思
2014/01/19 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏