logo标签列表

selectionStart和selectionEnd在textarea中代表什么意思？

javascripthtmljqueryselection-api
7
我发现了以下代码片段，用于在按下ctrl+enter时将回车插入文本区域中的文本。
$("#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之后，即使没有选择文本，这两个属性始终具有某些值。为什么会这样？

3个回答
10
selectionStart指定了<textarea>中选中/高亮文本的索引。同样，selectionEnd指定了选择结束的位置的索引。最初，它们被设置为0，如果<textarea>获得焦点但没有文本被选择，那么selectionStart和selectionEnd的值将是相同的，并反映了在<textarea>值内插入符号的位置。在失去焦点或blur事件发生时，它们将保留在blur事件之前设置的最后一个值上。
3
这里有一个你可以使用的示例：http://jsfiddle.net/5vd8pxct/ 这个if块似乎处理了跨浏览器兼容性。 document.selection用于IE。 selectionStart和selectionEnd似乎在其他地方工作。 我的机器上没有IE来进行实验，我正在使用Chrome。 从我的示例中可以看出，当页面加载时，默认的开始/结束位置为0。 如果您单击/选择框中的内容，则开始/结束位置将按预期设置。 如果您在框外单击，则框内的位置将被记住。
在Chrome中，document.selection未定义。
谢谢Marc，我很好地理解了selectionStart和selectionEnd。但是在Firefox中，document.selection也未定义。这是什么意思？ - Rupal
1
你的代码不能正常工作。你混用了普通的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"。在这个函数中，我们获取到了文本框对象的引用。在这个对象上，我们注册了一个新的事件监听器"onKeyDown"。在这个函数中，this指代文本框(chat)对象。借助于event对象，我们可以询问按下的键是哪个event.keyCode === 13。通过this(文本框)和它的属性selectionStart和selectionEnd，我们可以获取到选中的文本。

以上内容有小更新：当我尝试进行文本区域的操作时，selectionStart 等于插入符号之前的字符位置。 - David Edwards
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接