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

问题描述

问 题

使用window.getSelection（）获取页面中被选择的文字，但发现这个方法只针对div这些标签有效，对textarea中的内容获取无效，自己感觉问题解决关键点在文本框输入时主动获取焦点的问题上，segmentfault的编辑框就处理了这个的，求怎么破？

    doEdit:function(item){
        if(document.getSelection){
            let target =document.getSelection();
            console.log(target)
        }
    }
    

现象看图：

解决方案

<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 接口。

这篇关于javascript - 关于编辑框选中文本document.getSelection()的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！