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"

この文字列から、textareaから "become a good person"を選択した場合
、JavaScriptで選択したテキスト/文字列の位置を取得するにはどうすればよいですか？


ここでは、選択した文字列文字は29で始まり、49で終わります。したがって、開始位置は29で、終了位置は49です。

javascript  html 
— Md。Tahazzot
ソース
1
位置とは、文字列の "become"の文字 "b"のインデックスが何であるかを意味します。
— 午後
質問は単にHTMLInputElement.selectionStartとselectionEndを要求しているように感じますが、答えはほとんど選択イベントについて話します。ただし、他のすべての回答に含まれている回答を書く意味はありません。
— JollyJoker
1
— 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>
スニペットを展開

— カランバ
ソース
2
かなりきちんとしています。+1
— Saharsh
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>
— ドリームウィーバー
ソース
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);
— ノーハン・アーメド
ソース
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>
スニペットを展開

— ハイズ
ソース
あなたが実装した方法が好きですaddSelfDestructiveEventListener！
— カランバ
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)
    }
});});
— ヤセル・アブデル・マクスード
ソース
コードの内容に少し説明を付けていただけませんか？
— Rachel McGuigan
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.