如何将光标移动到 Javascript 中文本区域的最后一个位置？

Posted 2023-05-07

【中文标题】如何将光标移动到 Javascript 中文本区域的最后一个位置？

【英文标题】：How can you move the cursor to the last position of a textarea in Javascript?

【发布时间】：2010-10-12 20:16:12

【问题描述】：

我在表单上有一个文本区域和一个按钮。 textarea 中可能已经有一些文本。单击按钮时，我希望光标移动到文本区域中的最后一个位置。

这可能吗？

【参考方案1】：

xgMz 的回答对我来说是最好的。您无需担心浏览器：

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

这是我写的一个快速的 jQuery 扩展，下次我会这样做：

; (function($) 
    $.fn.focusToEnd = function() 
        return this.each(function() 
            var v = $(this).val();
            $(this).focus().val("").val(v);
        );
    ;
)(jQuery);

这样使用：

$("#MyTextArea").focusToEnd();

【参考方案2】：

“最后一个位置”是指文本的结尾吗？

更改表单字段的“.value”会将光标移动到除 IE 之外的所有浏览器的末尾。使用 IE，您必须亲自动手，并使用非标准接口故意操纵选择：

    if (browserIsIE) 
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
     else 
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    

或者你的意思是把光标放回原来的位置，最后一次聚焦文本区域？

在除 IE 之外的所有浏览器中，只需调用“element.focus()”就可以实现这一点；浏览器会记住每个输入的最后一个光标/选择位置并将其重新置于焦点上。

在 IE 中重现这将是相当棘手的。您必须一直轮询以检查光标/选择的位置，并记住该位置（如果它在输入元素中），然后在按下按钮时获取给定元素的位置并恢复它。这涉及到对“document.selection.createRange()”的一些非常繁琐的操作。

我不知道 jQuery 中有什么可以帮助您做到这一点，但也许某个地方有一个插件？

【讨论】：

哦，IE 选择处理比这更邪恶！ :-)

不确定这是否符合条件...这个问题被标记为 jQuery。但是，嘿，这应该可行:)

如果有帮助，我可以在其中添加一个 'var element= $('#mytextarea');' :-)

在 jQuery 中：var element = $("#ElementId");元素.焦点（）； var v = element.val(); element.val(''); element.val(v);

适用于 IE 9 和 IE 10

【参考方案3】：

您也可以这样做：

$(document).ready(function()

    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
);​

此代码适用于input 和textarea。使用最新浏览器测试：Firefox 23、IE 11 和 Chrome 28。

jsFiddle 可在此处获取：http://jsfiddle.net/cG9gN/1/

来源：https://***.com/a/12654402/114029

【参考方案4】：

你可以使用这个https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

【参考方案5】：

这是我在 onclick 或其他事件中用于 textareas 的内容，似乎适用于 FireFox 和 IE 7 & 8。它将光标定位在文本的末尾而不是前面。

this.value = "some text I want to pre-populate";
this.blur();
this.focus();

【讨论】：

唯一对我有用的解决方案（chrome v61）。

【参考方案6】：

设置鼠标焦点并将光标移动到输入的末尾。它适用于所有浏览器，这里只是简单的逻辑。

input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);

【参考方案7】：

我稍微修改了@mkaj 扩展以支持默认值

; (function($) 
    $.fn.focusToEnd = function(defaultValue) 
        return this.each(function() 
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") 
                prevValue = defaultValue;
            
            $(this).focus().val("").val(prevValue);
        );
    ;
)(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");