关于编辑框选中文本document.getSelection()的疑问

Question

使用window.getSelection（）获取页面中被选择的文字，但发现这个方法只针对div这些标签有效，对textarea中的内容获取无效，自己感觉问题解决关键点在文本框输入时主动获取焦点的问题上，segmentfault的编辑框就处理了这个的，求怎么破？    doEdit:function(item){        if(document.getSelection){            let target =document.getSelection();            console.log(target)        }    }    现象看图：

Answer 1

<textarea id="test"></textarea>

<script>

document.querySelector('#test').onselect = function(){

  let start = this.selectionStart;

  let end = this.selectionEnd;

  console.log(this.value.slice(start, end));

}

</script>

selection range 是基于 DOM Tree 的。Textarea 中的内容不由 DOM Tree管理，由 textarea 自己管理，因此你用 textarea.textContent 或者 textarea.innerText 也根本拿不到内容。 textarea 中的内容更改，也不会引起任何 node 或者 attribute 的变化，真正变化的是 textarea 的 value，这个 value 是 textarea 的 property.

注意 isCollapsed: true。这个值为 true 表示此时的 selection range 的长度为0，只是标记了一个位置，而不是一个 range 。

好在 textarea 自己由一套 selection 接口。