如何从textarea获取突出显示的文本位置？

Question

我想使用 javascript 获取选定的文本位置。例如，
我有一个简单的 textarea。

#input-text {
  resize: none;
  width: 50%;
  height: 50px;
  margin: 1rem auto;
}

<textarea id="input-text">I am a student and I want to become a good person</textarea>

在我的 textarea 中，我有一些文本，例如：

"I am a student and I want to become a good person"

从这个字符串中，如果我从 textarea 中选择“成为一个好人”，
那么我如何在 javascript 中获取选定的文本/字符串位置？


这里选择的字符串字符从 29 开始，到 49 结束。所以开始位置是 29 & 结束位置是 49

Answer 1

这将适用于使用鼠标和键盘为<textarea>页面上的所有元素选择文本。如果您不希望所有<textarea>元素都具有此文本选​​择，请更改选择器（更具体）。

阅读评论，如果您不想要/不需要键盘选择，您将了解如何禁用键盘选择。

var mySelection = function (element) {
    let startPos = element.selectionStart;
    let endPos = element.selectionEnd;
    let selectedText = element.value.substring(startPos, endPos);

    if(selectedText.length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log("startPos: " + startPos, " | endPos: " + endPos );
    console.log("selectedText: " +  selectedText);

  };

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for the mouse
    element.addEventListener('mouseup', function(){
        mySelection(element)
    });
    
    // register "keyup" event for the keyboard
    element.addEventListener('keyup', function( event ) {
        // assuming we need CTRL, SHIFT or CMD key to select text
        // only listen for those keyup events
        if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
            mySelection(element)
        }
    });
});

textarea {
   resize: none; 
   width: 50%;
   height: 50px; 
   margin: 1rem auto;
}

<textarea>I am a student and I want to become a good person</textarea>

Answer 2

我会利用onselect事件来获得相同的结果。

<textarea id="input-text" onselect="myFunction(event)">I am a student and I want to become a good person</textarea>


<script>
    function myFunction(event) {
      const start  = event.currentTarget.selectionStart;
      const end= event.currentTarget.selectionEnd;
    }
</script>