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

江枫思渺然 提交于 2020-01-13 18:15:55

背景

有一块div元素包含一段内容, 想要利用 CTRL+A 选中那块div元素下的的区间. 同时我又不想选中 div以外的内容, 默认情况下会将整个html页面可以选中的内容选中.

<div>
    <p>我想被选中</p>
</div>

实践

<div contenteditable="true" id="app">
<p>
  我想被Ctrl+A选中
</p>
<br />
<p>
  我也想被Ctrl+A选中
</p>
</div>

<script>
var app = document.getElementById('app');
app && app.addEventListener('keydown', function (event) {
    if ((event.ctrlKey || event.metaKey) && event.keyCode == 65) {
      console.log('allow')
  } else {
      event.preventDefault
    ? event.preventDefault()
    : event.returnValue = false;
  }
});
</script>

原理

  1. 利用 contenteditable属性, 让元素拥有控件自带的类似input, textarea输入特性, 那么使用 ctrl + acommand + a (mac) 就会给你选中里面的文本元素.
  2. 由于contenteditable 会让用户的按键属性出现编辑行为, 所以使用了keydown事件检查, 只允许 ctrl + acommand + 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;
}

参考

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!