selectionStart和selectionEnd在文本區域表示什么？

Question

我遇到了以下代碼片段，將Enter插入到按下ctrl + enter的textarea中的文本中。

$("#txtChatMessage").keydown(MessageTextOnKeyEnter);
function MessageTextOnKeyEnter(e) {
    console.log(this.selectionEnd);
    if (e.keyCode == 13) {
        if (e.ctrlKey) {
            var val = this.value;
            if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
                var start = this.selectionStart;

                this.value = val.slice(0, start) + "\n" + val.slice(this.selectionEnd);
                this.selectionStart = this.selectionEnd = start + 1;
            } else if (document.selection && document.selection.createRange) {
                this.focus();
                var range = document.selection.createRange();
                range.text = "\r\n";
                range.collapse(false);
                range.select();
            }
        }
        return false;
    }
}

我不明白的是selectionStart和selectionEnd在這里是什么意思？ 根據我閱讀的文檔，selectionStart-End在輸入元素中包含所選文本的開始-結尾。 但是，此處未明確選擇任何文本。 在執行console.log時，我可以看到，即使未選擇文本，這兩個屬性也始終具有某些值。 這是為什么？

Answer 1

selectionStart指定<textarea>選擇/突出顯示的文本的索引。 同樣， selectionEnd指定選擇結束的索引。 最初，它們設置為0 ，如果<textarea>被聚焦但未選擇任何文本，則selectionStart和selectionEnd值將相同，並反映插入符號在<textarea>值內的位置。 當<textarea>處於非焦點或blur時，它們將保持在blur事件發生之前設置的最后一個值。

Answer 2

這是您可以使用的小提琴： http : //jsfiddle.net/5vd8pxct/

有問題的if塊似乎可以處理跨瀏覽器的兼容性。 document.selection適用於IE。 selectionStart和selectionEnd似乎可以在其他地方使用。 我的機器上沒有IE可以進行實驗，而我正在使用Chrome。 從我的小提琴看來，頁面加載時默認的開始/結束是0 。 如果您單擊進入/在框中選擇，則開始終點將與預期的一樣。 如果在框外單擊，將記住框內的位置。

Chrome中未定義document.selection 。

Answer 3

您的代碼無效。 您將常規JavaScript和JQuery混合使用。 我建議從普通的JavaScript開始。 通常，在JavaScript中， this是對將在其上執行代碼的對象的引用。

看下面的例子：

 <html> <head> <script type="text/javascript"> window.addEventListener("load", function () { var chat = document.getElementById('txtChatMessage'); // get textarea chat.addEventListener('keydown', function (event) { //add listener keydown for textarea event = event || window.event; if (event.keyCode === 13) { //return pressed? event.preventDefault(); if (this.selectionStart != undefined) { var startPos = this.selectionStart; var endPos = this.selectionEnd; var selectedText = this.value.substring(startPos, endPos); alert("Hello, you've selected " + selectedText); } } }) }); </script> </head> <body> <textarea id="txtChatMessage" cols="40" rows="10"></textarea> </body> </html>

首先，事件監聽器“ onLoad”已經注冊。 在此函數中，我們獲得對textarea對象的引用。 在此對象上，新的事件偵聽器“ onKeyDown”已注冊。 在此功能內， this是指textarea（ chat ）對象。 借助於event對象，我們可以要求按下按鍵event.keyCode === 13 。 有了this （文本區域）及其屬性selectionStart和selectionEnd我們得到了選定的文本。

selectionStart和selectionEnd在文本區域表示什么？

問題描述

3 個解決方案

解決方案1
6 2015-02-22 22:02:16

解決方案2
2 2015-02-22 21:29:10

解決方案3
1 2015-02-22 22:14:20

selectionStart和selectionEnd在文本區域表示什么？

問題描述

3 個解決方案

解決方案1 6 2015-02-22 22:02:16

解決方案2 2 2015-02-22 21:29:10

解決方案3 1 2015-02-22 22:14:20

解決方案1
6 2015-02-22 22:02:16

解決方案2
2 2015-02-22 21:29:10

解決方案3
1 2015-02-22 22:14:20