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

背景

有一块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 + a 或 command + a (mac) 就会给你选中里面的文本元素.
2. 由于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 的区别