【前端技巧】教你如何选中元素内的所有文本内容

galois 发布于2019-08-02 15:59 / 1485人阅读

摘要：背景有一块元素包含一段内容想要利用选中那块元素下的的区间同时我又不想选中以外的内容默认情况下会将整个页面可以选中的内容选中我想被选中实践我想被选中我也想被选中原理利用属性让元素拥有控件自带的类似输入特性那么使用或就会给你选中里面的文本元素由

背景

有一块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/54475.html

【前端技巧】教你如何选中元素内的所有文本内容

摘要：背景有一块元素包含一段内容想要利用选中那块元素下的的区间同时我又不想选中以外的内容默认情况下会将整个页面可以选中的内容选中我想被选中实践我想被选中我也想被选中原理利用属性让元素拥有控件自带的类似输入特性那么使用或就会给你选中里面的文本元素由背景有一块div元素包含一段内容, 想要利用 CTRL+A 选中那块div元素下的的区间. 同时我又不想选中 div以外的内容, 默认情况下会将...

gougoujiang 2019-08-21 17:56 评论0 收藏0
css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0
HTML基础总结

摘要：细化知识点总结标签都是标题标签，定义一段话的标题，最大，依次递减，最小标题标签的作用让文本加粗显示段落标签标签用来显示一段文本图片，它会忽略源代码中的排版块元素独占一行的元素，和相邻的元素不能共享同一行所有的块元素都有属性和元素都是HTML细化知识点总结 1.h1-h6标签都是标题标签，定义一段话的标题，h1最大，依次递减，h6最小标题标签的作用：让文本加粗显示 2. 段落标签：p...

Jacendfeng 2019-04-23 11:54 评论0 收藏0
揪css系列（1）-业务代码中可用的小技巧

摘要：欢迎提斧正小技巧业务代码中可用的技巧兼容下的字体此方法在前端页面需要展示更小字体，兼容浏览器时非常有用。光标呈现为指示链接的指针一只手此光标指示某对象可被移动。此光标指示可用的帮助通常是一个问号或一个气球。控制表单控件的禁用状态。欢迎提issues 斧正： css小技巧业务代码中可用的CSS技巧兼容chrome下的10px字体 p { font-size: 10px; ...

MorePainMoreGain 2019-08-05 10:05 评论0 收藏0
一丢丢前端常用的小技巧

摘要：获取节点只能运用到上返回找到的元素节点速度是最快的能运用到所有元素节点上返回一个类数组的集合同上能运用到所有元素节点上返回第一个匹配的元素参数是标准的选择器能运用到所有元素节点上返回一个类数组的集合参数是标准的选择器操作获取或设置元素的返回获取DOM节点: document.getElementById(): 只能运用到document上, 返回找到的元素节点, 速度是最快的; d...

missonce 2019-08-21 13:32 评论0 收藏0