如何在Javascript中将光标移动到textarea的最后位置？

Question

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

这可能吗？

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

Answer 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;
    }

或者你的意思是把光标放回原来的位置,最后一次是textarea聚焦了吗？

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

在IE中重现这将非常棘手.您必须始终轮询以检查光标/选择的位置,并记住该位置(如果它位于输入元素中),然后在按下按钮时获取给定元素的位置并将其恢复.这涉及到'document.selection.createRange()'的一些非常繁琐的操作.

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

Answer 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://stackoverflow.com/a/12654402/114029