使用execCommand选择焦点上的可编辑文本

时间:2018-03-24 12:51:12

标签: angular textselection execcommand

我有一个简单的代码,可以选择所关注元素的所有内容:

HTML:

  <div tabindex="-1" class="data" contenteditable="true"  (focusin)="focusin($event)" (focusout)="focusout($event)"  >Content</div>

.TS:

focusin(e) {
  console.log("focusin");
  document.execCommand("selectall");
}

问题是这段代码选择了文档中的所有文本,而不仅仅是那些被关注的文本。从我在网上看到的,如果一个元素被聚焦,这不是select all all的工作方式:

How to select all text in contenteditable div?

这是否有解决方法?

1 个答案:

答案 0 :(得分:1)

以下是适用于Chrome和最新浏览器版本的解决方案:

focusin(e) {
  var range = document.createRange();
  range.selectNodeContents(e.target);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}