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

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

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

现象看图:图片描述

阅读 3.2k
评论
    3 个回答
    • 3.8k
    <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 接口。

      • 554

      要用 document.activeElement, 应该可以解决你的问题.

        • 2.7k

        感觉问题解决关键点在文本框输入时主动获取焦点的问题上

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章