Question

我使用以下函数将消息（msg）插入到文本字段中。

插入文本后，光标需要在输入的msg的最后一个字符之后。文本字段已包含一些文本。

当我插入消息时，光标会聚焦在msg末尾附近，但肯定不会在最后一个字符之后。似乎有些角色不会被.length计算？

     function insertAtCursor(msg) {
           var textArea = document.getElementsByName("message")[0];
           textArea.value = textArea.value.substr(0, textArea.selectionStart) + msg +        textArea.value.substr(textArea.selectionEnd);
           var endMsgPos = textArea.value.lastIndexOf(msg) + msg.length;
           textArea.setSelectionRange(endMsgPos, endMsgPos);
     }

Answer 1

不需要textArea.value.lastIndexOf(msg)。

function insertAtCursor(msg) {
    var textArea = document.getElementsByName("message")[0];
    var selStart = textArea.selectionStart, val = textArea.value;
    textArea.value = val.slice(0, selStart) + msg +
                     val.slice(textArea.selectionEnd);
    var endMsgPos = selStart + msg.length;
    textArea.setSelectionRange(endMsgPos, endMsgPos);
}

Answer 2

首先，如果您尝试使用textArea.selectionStart，则会遇到IE 8的问题，因为它使用不同的API。

如果插入符号位于字符串的乞讨处，并且最后某处存在msg的值，则lastIndexOf在您的代码中会表现得很奇怪。

试试这个：

   function insertAtCursor(msg) {
     var e = document.getElementsByName('message')[0],
     length = msg.length, val = e.value;
     /* mozilla / dom 3.0 */
     if ('selectionStart' in e){
       var partial = val.slice(0, e.selectionStart) + msg;
       e.value = partial + val.slice(e.selectionEnd);
       var end = partial.length; 
       e.setSelectionRange(end, end);
     }
     /* exploder */
     if (document.selection){
         e.focus();
         document.selection.createRange().text = msg;
     }
   }

演示在这里：http://jsbin.com/UnOBUbU/6

在文本字段中插入文本后聚焦光标

2 个答案: