14

テキストエリアで選択の開始点と終了点を取得/検索しようとしています。Mozilla と chrome では正常に動作するが、IE9 では動作しない私のコードを次に示します。

<script type="txt/javascript">
    function update(o) {

            var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o);
            alert("start :" + s + " End :" + e);
        }

        function getSelectionStart(o) {
            if (o.createTextRange) {
                var r = document.selection.createRange().duplicate()
                rse = r.text.length;
                r.moveEnd('character', o.value.length)
                if (r.text == '') return o.value.length
                return o.value.lastIndexOf(r.text)
            } else return o.selectionStart
        }

        function getSelectionEnd(o) {
            if (o.createTextRange) {
                var r = document.selection.createRang;e().duplicate()
                r.moveStart('character', -o.value.length)
                return r.text.length
            } else return o.selectionEnd
        }
</script>

<textarea id ="text" rows=10 cols="50" onselect="update(this);"></textarea>

このコードを Mozilla と chrome でテストすると正しい答えが得られますが、このコードを IE9 で実行すると start に -1 、 end に任意の値が表示されます。

テキストエリアの選択テキストの開始点と終了点/インデックスを見つけたいだけです。実際、上記のコードはすべてのブラウザーのテキストボックスでは正常に機能しますが、テキストエリアでは機能しません。

私に提案してください...

4

2 に答える 2

9

以下のコードを使用するか、このフィドルを確認してください

   function getTextSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }
    alert("start :" + start + " End :" + end);
}
于 2012-08-30T10:10:29.170 に答える
5

元の回答は 2012 年の OP に役立ったかもしれませんが、状況は変わり、少なくとも最新のブラウザーではよりシンプルになりました。

テキストエリアの JavascriptselectionStartとselectionEnd属性を使用できます。

基本的な使い方:

これらは両方とも、今日の主要なブラウザー (Chrome、Safari、Firefox、Opera、Edge、IE) で機能する標準属性です。

例えば：

console.log(document.getElementById("text").selectionStart,document.getElementById("text").selectionEnd)

ID を持つ textarea 内の選択範囲の開始点と終了点の両方を返しますtext。

境界ケース:

テキストエリアでアイテムが選択されていない場合、 start 属性と end 属性の両方がキャレットの最後の位置を返します。テキストエリアがまだフォーカスを受け取っていない場合、属性は両方とも の値を返します0。

選択の変更:

これらの属性を新しい値に設定することにより、アクティブなテキスト選択を調整します。したがって、これを使用してテキストエリア内のテキストを選択することもできます。

選択が適切かどうかを確認する:

値が両方とも異なるかどうかを確認することで、現在選択されているかどうかを確認できます。

document.getElementById("text").selectionStart != document.getElementById("text").selectionEnd

が true の場合、テキスト選択があります。

参考文献

于 2016-12-20T02:14:51.220 に答える