如何从JavaScript中的textarea获取选定的文本位置？

20

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

#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>

展开摘要

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

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

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

此处选择的字符串字符从29开始，以49结尾。因此，开始位置是29，结束位置是49

javascript html

— 塔哈佐特山
source

1

位置表示字符串中“ become”的字符“ b”的索引是什么？

— palaѕн

我觉得问题只是在询问HTMLInputElement.selectionStart和selectionEnd，而答案大多是关于选择事件的。但是，编写包含在所有其他答案中的答案毫无意义。

— JollyJoker

1

这回答了你的问题了吗？如何使用javascript从文本框控件中获取选定的文本

— Matsemann

24

这将适用于使用鼠标和键盘选择页面上所有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>

展开摘要

— 卡兰巴
source

2

挺整洁的。+1

— 萨哈什

2

如果选择使用键盘而不是鼠标，则不会触发。

— curiousdannii

1

@curiousdannii我已经更新了答案，现在它也可以使用键盘选择

— caramba

5

我会利用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>

— Dreamweaver的
source

1

    var idoftextarea='answer';
    function getSelectedText(idoftextarea){
        var textArea = document.getElementById(idoftextarea);
        var text =textArea.value;
        var indexStart=textArea.selectionStart;
        var indexEnd=textArea.selectionEnd;
        alert(text.substring(indexStart, indexEnd));

    }


    getSelectedText(idoftextarea);

— 努尔汗·艾哈迈德（Nourhan Ahmed）
source

1

Caramba的答案非常有效，但是我遇到的问题是，如果您选择了一些文本并在textarea 之外释放了鼠标，则该事件不会触发。

为了解决这个问题，我将初始事件更改为mousedown，该事件mouseup在文档上注册了一个事件，以确保在释放光标后将其触发。该mouseup事件然后删除它本身已经解雇了。

这可以通过添加 once选项来实现addEventListener，但是可悲的是IE11不支持该功能，这就是为什么我在代码段中使用了该解决方案。

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);
};

function addSelfDestructiveEventListener (element, eventType, callback) {
    let handler = () => {
        callback();
        element.removeEventListener(eventType, handler);
    };
    element.addEventListener(eventType, handler);
};

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for those
    element.addEventListener('mousedown', function(){
      // This will only run the event once and then remove itself
      addSelfDestructiveEventListener(document, '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>

展开摘要

— 希氏
source

我喜欢您实施的方法addSelfDestructiveEventListener！

— caramba

0

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)
    }
});});

— 亚瑟·阿卜杜勒·马克苏德
source

您能为您的代码做些解释吗？

— Rachel McGuigan