javascriptを使用してテキストボックスコントロールから選択したテキストを取得する方法

StackOverflow https://stackoverflow.com/questions/275761

質問

テキストボックスとリンクボタンがあります。 テキストを作成してから、それらの一部を選択してリンクボタンをクリックすると、テキストボックスから選択したテキストがメッセージボックスとともに表示されます。

どうすればいいですか？

下のテキストボックスの送信ボタンをクリックすると、メッセージボックスにLorem ipsumが表示されます。なぜなら<！> quot; Lorem ipsum <！> quot;エリアで選択されています。

ページからテキストを選択して送信ボタンをクリックすると機能しますが、テキストをテキストボックスに書き込んで作成しても機能しません。別のスペースをクリックすると、テキストボックスの選択がキャンセルされるためです。

今の問題は、テキストボックスからテキストを選択し、他のコントロールまたはスペースをクリックすると、選択されているテキストが選択されたままでなければならないことです。

どのように行われますか？

役に立ちましたか？

解決

OK、ここに私が持っているコードがあります：

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  {// Standards Compliant Version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  {// IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

問題。IEに提供するコードは多くのサイトで提供されていますが、現在のシステムのIE6のコピーで動作させることはできません。おそらくそれはあなたのために働くでしょう、それが私がそれを与える理由です。
探しているトリックは、おそらく.focus（）呼び出しです。これはtextareaにフォーカスを戻し、選択が再びアクティブになるようにします。

[UPDATE] onKeyDownイベントで正しい結果（選択内容）を得ました：

document.onkeydown = function (e) { ShowSelection(); }

コードは正しいです。繰り返しになりますが、問題はボタンをクリックして選択を取得することです...私は検索を続けます。

[UPDATE] liタグで描かれたボタンで成功しませんでした。クリックすると、IEは前の選択を選択解除するからです。上記のコードは、単純なinputボタンで機能しますが...

他のヒント

これは、マウスアップでテキスト選択が行われるという事実に基づいた、はるかに簡単なソリューションです。そのため、イベントリスナーを追加します。

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

これはすべてのブラウザで機能します。

キーボードによる選択も処理する場合は、同じコードで別のイベントリスナーをkeyupに追加します。

これがなかった場合 Firefoxのバグが提出されました2001年（はい、14年前）では、window.mySelectionに割り当てられた値をwindow.getSelection().toString()に置き換えることができます。これはIE9 +およびすべての最新のブラウザーで動作し、 DOM。

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(t);
}
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />

Opera、Firefox、Safariでは、次の機能を使用できます。

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

次に、テキストフィールド要素（textareaまたはinput要素など）への参照を関数に渡します。

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

または、<！> lt; textarea <！> gt;が必要な場合および<！> lt; input <！> gt;独自のgetSelection（）関数を持つ：

HTMLTextAreaElement.prototype.getSelection = HTMLInputElement.prototype.getSelection = function() {
    var ss = this.selectionStart;
    var se = this.selectionEnd;
    if (typeof ss === "number" && typeof se === "number") {
        return this.value.substring(this.selectionStart, this.selectionEnd);
    }
    return "";
};

その後、あなたはただやる：

alert(document.getElementsByTagName("textarea")[0].getSelection());
alert(document.getElementsByTagName("input")[0].getSelection());

たとえば。

jQuery-textrange の大ファン

以下は、非常に小さい自己完結型の例です。 jquery-textrange.jsをダウンロードし、同じフォルダーにコピーします。 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>

<script>
/* run on document load **/
$(document).ready(function() {
    /* run on any change of 'textarea' **/
    $('#textareaId').bind('updateInfo keyup mousedown mousemove mouseup', function() {
        /* The magic is on this line **/
        var range = $(this).textrange();
        /* Stuff into selectedId.  I wanted to store this is a input field so it can be submitted in a form. **/
        $('#selectedId').val(range.text);
    });
});
</script>
</head>
<body>

    The smallest example possible using 
    <a href="https://github.com/dwieeb/jquery-textrange">
       jquery-textrange
    </a><br/>
    <textarea id="textareaId" >Some random content.</textarea><br/>
    <input type="text"  id="selectedId"  ></input>

</body>
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top