博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
让 select 的 option 标签支持事件监听(如复制操作)
阅读量:6370 次
发布时间:2019-06-23

本文共 763 字,大约阅读时间需要 2 分钟。

这标题,让option支持事件监听,应该不难的呀,有什么好讲的?

其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置

查了一些资料,姑且认为它是系统OS级别处理的

 

想自定义option的样式,很多人会建议用 <ul> <li> 标签来辅助同步操作与值

想对option进行事件监听,有一个tip:当给select显示设置了size 属性且值 大于1 时,才能监听

 

近来产品也提了个鼠标操作复制option值的需求,就利用这个size属性实现一番吧

先看图

实现小析

因为select的size属性表示默认展示多少个option,并设置这个高度

不过有了size之后,默认select右侧就会出现滚动条式样,加个 overflow:hidden 处理就行了

此外,功能操作与原select也有一些些不同,也要模拟处理

右键后生成一个复制按钮,点击复制则调用浏览器自身的复制命令

 

HTML

复制按钮的模板

要注意一个点,id为myCopyVal放在此处是为了方便定位元素,再调用文本select()方法,调用此方法时要求dom元素不能隐藏

所以需用 opacity:0 代替 type="hidden" | display:none | visibility:hidden

JS部分

    

当然了,这个execCommand方法可能在某些浏览器上不支持,这里还没做兼容,复制功能也还有些简陋

就酱

转载于:https://www.cnblogs.com/imwtr/p/6060194.html

你可能感兴趣的文章
syslog:类Unix系统常用的log服务
查看>>
使用Annotation设计持久层
查看>>
深入实践Spring Boot2.4.1 Neo4j依赖配置
查看>>
Zen Cart 如何添加地址栏上的小图标
查看>>
SecureCrt 连接Redhat linux
查看>>
[NHibernate]持久化类(Persistent Classes)
查看>>
如何在Hive中使用Json格式数据
查看>>
linux如何恢复被删除的热文件
查看>>
Eclipse(MyEclipse) 自动补全
查看>>
Struts2中dispatcher与redirect的区别
查看>>
zabbix agentd configure
查看>>
地图点聚合优化方案
查看>>
Google Chrome 快捷方式
查看>>
备考PMP心得体会
查看>>
vue proxy匹配规则
查看>>
线上应用故障排查之一:高CPU占用
查看>>
Extend Volume 操作 - 每天5分钟玩转 OpenStack(56)
查看>>
IronPython教程
查看>>
squid via检测转发循环
查看>>
计算分页
查看>>