Question

我遇到了以下代码片段，将enter插入到textarea中的文本中，其中按下了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包含input元素中所选文本的开头。但是，此处未明确选择任何文本。在做console.log时，我可以看到即使没有选择文本，这两个属性也总是有一些值。那是为什么？

Answer 1

selectionStart指定<textarea>中所选/突出显示文本的索引。同样，selectionEnd指定选择结束的索引。最初，它们设置为0，如果<textarea>已聚焦但未选择任何文字，则selectionStart和selectionEnd值将相同，并反映位置在<textarea>的值内的插入符号。在取消焦点或blur <textarea>时，它们将保留在blur事件之前设置的最后一个值。

Answer 2

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

有问题的if块似乎可以处理跨浏览器的兼容性。 document.selection适用于IE。 selectionStart和selectionEnd似乎在别处工作。我的机器上没有IE来试验它，而且我使用的是Chrome。从我的小提琴看来，页面加载时默认的开始/结束是0。如果单击框中的/ select，则开始端将按预期方式进行。如果您在框外单击，则会记住框内的位置。

Chrome中未定义

document.selection。

Answer 3

您的代码不起作用。你混合常规的JavaScript和JQuery。我建议从简单的JavaScript开始。通常，在JavaScript中this是对将在其上执行代码的对象的引用。

看看下面的例子：

＆＃13;

<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>

＆＃13;

首先是一个事件监听器＆＃34; onLoad＆＃34;已经注册。在这个函数中，我们得到了textarea对象的引用。在这个对象上有一个新的事件监听器＆＃34; onKeyDown＆＃34;已经注册。在此函数中this引用textarea（chat）对象。在event对象的帮助下，我们可以请求按下的键event.keyCode === 13。使用this（textarea）及其属性selectionStart和selectionEnd，我们会获得所选文字。

selectionStart和selectionEnd对textarea有什么意义？

3 个答案: