如何在文本区域的末尾设置光标？

Posted 2023-05-07

【中文标题】如何在文本区域的末尾设置光标？

【英文标题】：How to set cursor at the end in a textarea?

【发布时间】：2012-04-26 20:12:57

【问题描述】：

有没有办法将光标设置在 textarea 元素的末尾？我使用的是 Firefox 3.6，我不需要它在 IE 或 Chrome 中工作。似乎这里的所有相关答案都使用onfocus() 事件，这似乎没用，因为当用户单击textarea 元素中的任何位置时，Firefox 会将光标位置设置到那里。我在textarea 中显示了一个长文本，以便它显示最后一部分（更容易在最后添加一些内容）。

没有框架或库。

【参考方案1】：

可能有很多方法，例如

element.focus();
element.setSelectionRange(element.value.length,element.value.length);

http://jsfiddle.net/doktormolle/GSwfW/

【参考方案2】：

自从我使用 javascript 以来，我已经很久没有第一次查看 jQuery 解决方案了......

话虽如此，使用 javascript 的最佳方法是在 textarea 聚焦时获取当前在 textarea 中的值，并将 textarea 的值设置为获取的值。这在 jQuery 中总是有效的：

$('textarea').focus(function() 
    var theVal = $(this).val();
    $(this).val(theVal);
);

在纯javascript中：

var theArea = document.getElementByName('[textareaname]');

theArea.onFocus = function()
    var theVal = theArea.value;
    theArea.value = theVal;

我可能是错的。有点生锈了。

【讨论】：

我喜欢这个解决方案，因为它只有 2 行代码，但我认为它比 Starx 解决方案工作量更大。

【参考方案3】：

selectionStart 足以设置初始光标点。

    element.focus();
    element.selectionStart = element.value.length;

【参考方案4】：

这是一个函数

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();
    

[Demo][Source]

【参考方案5】：

var t = /* get textbox element */ ;

t.onfocus = function ()  
    t.scrollTop = t.scrollHeight; 
    setTimeout(function() 
      t.select(); 
      t.selectionStart = t.selectionEnd; 
    , 10); 

诀窍是使用 setTimeout 更改文本插入（克拉）位置在浏览器完成处理焦点事件之后；否则位置将由我们的脚本设置，然后立即由浏览器设置为其他位置。

【参考方案6】：

textarea.focus()
textarea.value+=' ';//adds a space at the end, scrolls it into view

【参考方案7】：

(this.jQuery || this.Zepto).fn.focusEnd = function () 
    return this.each(function () 
        var val = this.value;
        this.focus();
        this.value = '';
        this.value = val;
    );
;

【参考方案8】：

@Dr.Molle 的回答是对的。只是为了增强，U 可以与 prevent-default 结合使用。

http://jsfiddle.net/70des6y2/

示例：

document.getElementById("textarea").addEventListener("mousedown", e => 
  e.preventDefault();
  moveToEnd(e.target);
);
function moveToEnd(element) 
  element.focus();
  element.setSelectionRange(element.value.length, element.value.length);