摘要:背景有一块元素包含一段内容想要利用选中那块元素下的的区间同时我又不想选中以外的内容默认情况下会将整个页面可以选中的内容选中我想被选中实践我想被选中我也想被选中原理利用属性让元素拥有控件自带的类似输入特性那么使用或就会给你选中里面的文本元素由
背景
有一块div元素包含一段内容, 想要利用 CTRL+A 选中那块div元素下的的区间. 同时我又不想选中 div以外的内容, 默认情况下会将整个html页面可以选中的内容选中.
实践我想被选中
我想被Ctrl+A选中
我也想被Ctrl+A选中
原理
利用 contenteditable属性, 让元素拥有控件自带的类似input, textarea输入特性, 那么使用 ctrl + a 或 command + a (mac) 就会给你选中里面的文本元素.
由于contenteditable 会让用户的按键属性出现编辑行为, 所以使用了keydown事件检查, 只允许 ctrl + a 和 command + a 两种组合键通过默认行为. 其余行为均阻止浏览器默认行为.
DEMO
扩展知识 contenteditable 元素属性默认属性: false
可选属性: true | false
HTML5 引入的新属性
onselectstart, onselect 事件onselectstart 适合 非 input, textarea 元素
onselect 适合 input, textarea及window元素
user-select 样式属性默认属性: auto;
可选属性: none | text | all | element;
.disable-select { user-select: none; -webkit-select: none; }参考
user-select MDN
How does one capture a Mac"s command key via JavaScript?
onselect 与 onselectstart 的区别
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90248.html
摘要:背景有一块元素包含一段内容想要利用选中那块元素下的的区间同时我又不想选中以外的内容默认情况下会将整个页面可以选中的内容选中我想被选中实践我想被选中我也想被选中原理利用属性让元素拥有控件自带的类似输入特性那么使用或就会给你选中里面的文本元素由 背景 有一块div元素包含一段内容, 想要利用 CTRL+A 选中那块div元素下的的区间. 同时我又不想选中 div以外的内容, 默认情况下会将...
摘要:在正式前端一些小细节前端掘金英文原文,翻译未来的太让人兴奋了一方面,是全新的页面布局方式另一方面,是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务:有趣的鼠标悬浮模糊效果,参考:http://ife.baidu.com/course/d...,用CSS3实现了一下,顺便...
摘要:细化知识点总结标签都是标题标签,定义一段话的标题,最大,依次递减,最小标题标签的作用让文本加粗显示段落标签标签用来显示一段文本图片,它会忽略源代码中的排版块元素独占一行的元素,和相邻的元素不能共享同一行所有的块元素都有属性和元素都是HTML细化知识点总结 1.h1-h6标签 都是标题标签,定义一段话的标题,h1最大,依次递减,h6最小 标题标签的作用:让文本加粗显示 2. 段落标签:p...
摘要:获取节点只能运用到上返回找到的元素节点速度是最快的能运用到所有元素节点上返回一个类数组的集合同上能运用到所有元素节点上返回第一个匹配的元素参数是标准的选择器能运用到所有元素节点上返回一个类数组的集合参数是标准的选择器操作获取或设置元素的返回 获取DOM节点: document.getElementById(): 只能运用到document上, 返回找到的元素节点, 速度是最快的; d...
阅读 2211·2019-08-30 15:54
阅读 1947·2019-08-30 13:49
阅读 665·2019-08-29 18:44
阅读 824·2019-08-29 18:39
阅读 1104·2019-08-29 15:40
阅读 1524·2019-08-29 12:56
阅读 3134·2019-08-26 11:39
阅读 3093·2019-08-26 11:37