selectionStart 和 selectionEnd 对 textarea 意味着什么？答案

【问题标题】：What do selectionStart and selectionEnd signify for textarea?selectionStart 和 selectionEnd 对 textarea 意味着什么？
【发布时间】：2015-04-24 03:42:58
【问题描述】：

我遇到了以下代码 sn-p 将 enter 插入到按 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 时，我可以看到即使未选择文本，这两个属性也始终具有某些值。这是为什么呢？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这是一个你可以玩的小提琴： http://jsfiddle.net/5vd8pxct/

有问题的if 块似乎处理跨浏览器兼容性。 document.selection 用于 IE。 selectionStart 和 selectionEnd 似乎在其他地方工作。我的机器上没有 IE 来试验它，我正在使用 Chrome。从我的小提琴看来，页面加载时默认的开始/结束是0。如果您在框中单击/选择，则开始结束将如预期的那样。如果您在框外单击，则会记住框内的位置。

document.selection 在 Chrome 中未定义。

【讨论】：

谢谢 Marc，我理解 selectionStart 和 selectionEnd 很好。但 document.selection 在 Firefox 中也未定义。这是做什么的？？

【解决方案2】：

selectionStart 指定<textarea> 中选择/突出显示的文本的索引。同样，selectionEnd 指定选择结束的索引。最初，它们被设置为0，如果<textarea> 被聚焦但没有选择文本，selectionStart 和selectionEnd 的值将是相同的，并反映插入符号在值中的位置<textarea>。在 <textarea> 的 un-focus 或 blur 上，它们将保持在 blur 事件之前设置的最后一个值。

【讨论】：

【解决方案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 (textarea) 及其属性selectionStart 和selectionEnd，我们得到选定的文本。

【讨论】：

对上述内容的一点更新：当我尝试这种 textarea 操作时， selectionStart 等于 紧接在插入符号之前的字符的字符位置。