Web APIs——焦点事件以及小米搜索框

一、事件类型

二、焦点事件 

<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('focus',function(){console.log('有焦点触发')})input.addEventListener('blur',function(){console.log('失去焦点触发')})</script>
</body>

小米搜索框

需求:当表单得到焦点,显示下拉菜单,失去焦点隐藏下拉菜单

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>// 1. 获取元素const input = document.querySelector('[type=search]')const ul = document.querySelector('.result-list')// console.log(input);// 2. 监听事件 获得焦点input.addEventListener('focus',function(){// ul 显示ul.style.display = 'block'// 添加一个带有颜色边框的类名input.classList.add('search')})// 3. 监听事件 失去焦点input.addEventListener('blur',function(){ul.style.display = 'none'input.classList.add('search')})</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS数组扁平化多维数组变为一维数组的三种方法

在实践中&#xff0c;我们有一个多维数组&#xff0c;我想把它变为一维数组&#xff0c;我们该怎么办呢&#xff1f; 让我为大家介绍一下吧&#xff01; 1.flat方法 我们使用flat可以实现降维 // 声明一个数组const arr [1,2,3,[4,5,6]]// 我们使用flat方法console.log(arr.…

hbase和aerospike基础概念及所对应的python包API使用

Hbase Hbase shell常用操作 1.创建表 create table name,column familytable name&#xff1a;表名 column family:列族名 2.查看所有表名称 list3.插入操作 put table name,row1,column family:column name,valuerow1:行键(即Row Key) column family:column name&#xf…

如何使用 JMeter 进行 HTTPS 请求测试?

本文将介绍如何使用 JMeter 测试 HTTPS 请求&#xff0c;并提供相关的技巧和注意事项。 在进行性能测试时&#xff0c;很多网站都采用了 HTTPS 协议。当我们测试 HTTPS 请求&#xff0c;如果服务端开启了双向认证&#xff0c;则需要客户端发送请求时带上证书。本文介绍如何在 …

【Axure视频教程】曲线图

今天教大家在Axure制作可视化曲线图的原型模板&#xff0c;鼠标移入曲线图后&#xff0c;会显示弹窗并回显对应折点的具体数据&#xff0c;该模板是用Axure原生元件制作的&#xff0c;所以使用方便&#xff0c;可以任意修改对应样式或者交互效果。该原型模板的具体效果可以参考…

Oracle通过局域网进行连接访问的设置

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法 &#x1f492; 公众号&#xff1a;知识浅谈 &#x1f525;网站…

Pytorch--3.使用CNN和LSTM对数据进行预测

这个系列前面的文章我们学会了使用全连接层来做简单的回归任务&#xff0c;但是在现实情况里&#xff0c;我们不仅需要做回归&#xff0c;可能还需要做预测工作。同时&#xff0c;我们的数据可能在时空上有着联系&#xff0c;但是简单的全连接层并不能满足我们的需求&#xff0…

docker运行elastic和kibana,并使用密码连接

1. elasticsearch 运行容器 docker run -d --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" elasticsearch:7.7.0 进入容器 docker exec -it elasticsearch bash修改配置开启密码校验 vi ./conf/elasticsearch.yml添加以下内容 …

PX4天大bug,上电反复重启,连不上QGC!

一、Debug与Bug 由于自己写的代码CPU占用率过高&#xff0c;解锁报错 CPU load too high!无法解锁。 于是把 COM_CPU_MAX 从默认的 90% 变为 99%&#xff08;千万别这样搞&#xff0c;这是bug&#xff0c;除非想玩&#xff01;&#xff09;。 然后重启&#xff0c;飞机就反…

css3 3D 转换 技巧详细解析与代码实例

CSS3 3D转换是CSS3中的一项新特性&#xff0c;通过它我们可以比较容易地实现3D效果。在这里&#xff0c;我将向大家介绍CSS3 3D转换的一些基本概念、使用方法和常见技巧。 1. 基本概念 在使用CSS3 3D转换时&#xff0c;需要了解一些基础概念&#xff1a; 三维坐标系&#xf…

【Docker】Docker学习之一:离线安装Docker步骤

前言&#xff1a;基于Ubuntu Jammy 22.04 (LTS)版本安装和测试 1、Docker安装 1.1、离线安装 步骤一&#xff1a;官网下载 docker 安装包 wget https://download.docker.com/linux/static/stable/x86_64/docker-24.0.6.tgz步骤二&#xff1a;解压安装包; tar -zxvf docker…

谈谈Net-SNMP软件

Net-SNMP是一个开源的SNMP软件套件&#xff0c;它提供了SNMP代理&#xff08;snmpd&#xff09;和SNMP工具&#xff08;如snmpget、snmpwalk等&#xff09;&#xff0c;可以用于监控和管理网络设备。 Net-SNMP最初是从UC Davis的SNMP软件衍生而来&#xff0c;现在已经成为广泛…

小程序设计基本微信小程序的校园生活助手系统

项目介绍 通篇文章的撰写基础是实际的应用需要&#xff0c;然后在架构系统之前全面复习大学所修习的相关知识以及网络提供的技术应用教程&#xff0c;以校园生活助手系统的实际应用需要出发&#xff0c;架构系统来改善现校园生活助手系统工作流程繁琐等问题。不仅如此以操作者…

纺织工厂数字孪生3D可视化管理平台,推动纺织产业数字化转型

近年来&#xff0c;我国加快数字化发展战略部署&#xff0c;全面推进制造业数字化转型&#xff0c;促进数字经济与实体经济深度融合。以数字孪生、物联网、云计算、人工智能为代表的数字技术发挥重要作用。聚焦数字孪生智能工厂可视化平台&#xff0c;推动纺织制造业数字化转型…

【Java集合类面试十八】、ConcurrentHashMap是怎么分段分组的?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;ConcurrentHashMap是怎么…

手把手教你在项目中引入Excel报表组件

摘要&#xff1a;本文由葡萄城技术团队原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 GrapeCity Documents for Excel&#xff08;以下简称GcExcel&#xff09;是葡萄城公司的…

【TES641】基于VU13P FPGA的4路FMC接口基带信号处理平台

板卡概述 TES641是一款基于Virtex UltraScale系列FPGA的高性能4路FMC接口基带信号处理平台&#xff0c;该平台采用1片Xilinx的Virtex UltraScale系列FPGA XCVU13P作为信号实时处理单元&#xff0c;该板卡具有4个FMC子卡接口&#xff08;其中有2个为FMC接口&#xff09;&#x…

Vue3.3指北(二)

Vue3.3指北 Vue31、组件基础1.1、全局组件1.2、局部组件1.3、组件的命名1.4、组件的数据存放1.5、组件标签化 2、父组件向子组件传递数据2.1、props2.2、动态props2.3、props传数组2.4、props传对象2.4.1、默认值和必传值 3、子组件向父组件传递数据4、父子组件互相访问4.1、父…

服务器之日常整活

文章目录 一&#xff0c;序二、服务器相关流水帐未完&#xff0c;待补充 一&#xff0c;序 假如你有一台服务器&#xff0c;你最想做哪些事&#xff1f; 等等&#xff0c;什么叫假如你有一台服务器&#xff0c;假如只有一台&#xff0c;肯定我想搞第二台&#xff0c;顺便第三台…

苹果手机自身的ip地址怎么查

随着互联网的普及&#xff0c;越来越多的人使用智能手机连接到网络。苹果手机用户可能想要知道他们的设备如何获取或查询自身的IP地址。虎观代理小二二将详细介绍如何在苹果手机上查找IP地址。 在苹果手机上查询IP地址的方式有多种&#xff0c;其中最常用的方法是通过手机设置…

03初始Docker

一、初始Docker 1.什么是Docker 问题 ①大型项目组件复杂&#xff0c;运行环境复杂&#xff0c;部署时依赖复杂&#xff0c;出现兼容性问题。 ②开发&#xff0c;测试&#xff0c;生产环境有差异。不同的环境操作系统不同 解决 ①Docket将应用、依赖、函数库、配置一起打…