选中时如何将光标放在textarea中的文本末尾

Pee*_*ter 10 javascript textarea

可能重复:
Javascript:将插入符号移到最后一个字符

我有一个标准的textarea,里面有一些文字.我正在寻找一种方法让光标自动放在现有文本的末尾,这样用户就可以简单地开始输入以添加更多文本.每当textarea变为活动状态时(例如当用户选中它时)就会发生这种情况.有任何想法吗?

Tim*_*own 25

我之前已经回答过:Javascript:将插入符号移到最后一个字符

jsFiddle:http://jsfiddle.net/ghAB9/6/

码:

<textarea id="test">Some text</textarea>
Run Code Online (Sandbox Code Playgroud)
function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

var textarea = document.getElementById("test");

textarea.onfocus = function() {
    moveCaretToEnd(textarea);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(textarea);
    }, 1);
};
Run Code Online (Sandbox Code Playgroud)

  • @HP:Chrome中的问题(至少在编写此答案的当前版本中)是它触发`focus`事件然后显示插入符号,这意味着浏览器仅在`moveCaretToEnd()之后显示插入符号`被叫了.`window.setTimeout()`调用允许浏览器首先显示插入符,然后JavaScript将其移动到位. (3认同)

sit*_*sys 4

您需要监听文本区域中的焦点事件,例如:

<textarea onfocus="setCursorAtTheEnd(this,event)"/>
Run Code Online (Sandbox Code Playgroud)

然后在你的 javascript 代码中:

function setCursorAtTheEnd(aTextArea,aEvent) {
    var end=aTextArea.value.length;
    if (aTextArea.setSelectionRange) {
        setTimeout(aTextArea.setSelectionRange,0,[end,end]);  
    } else { // IE style
        var aRange = aTextArea.createTextRange();
        aRange.collapse(true);
        aRange.moveEnd('character', end);
        aRange.moveStart('character', end);
        aRange.select();    
    }
    aEvent.preventDefault();
    return false;
}
Run Code Online (Sandbox Code Playgroud)