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

Question

我有一个表单上的文本框和一个按钮，文本框里可能已经有一些文字。当按钮被点击时，我希望光标能够移动到文本框中的最后一个位置。

这个可以实现吗？

- sol

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

- mkaj

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 中是否有任何可帮助您完成此操作的内容，但可能某个插件中存在这样的功能呢？

- bobince

---

哦，IE的选择处理可能比那更加恶劣！ :-) - bobince

不确定这是否符合要求...这个问题被标记为jQuery。但是，嘿，那应该可以工作 :) - Seb

我可以在if语句中加入“var element= $('#mytextarea');”来帮助你 :-) - bobince

在jQuery中： var element = $("#ElementId"); element.focus(); var v = element.val(); element.val(''); element.val(v);翻译为： 使用jQuery： var element = $("#ElementId"); // 获取id为“ElementId”的元素 element.focus(); // 聚焦于该元素 var v = element.val(); // 获取该元素的值 element.val(''); // 清空该元素的值 element.val(v); // 将之前获取的值重新赋值给该元素 - xgMz

适用于IE 9和IE 10。 - Zephyr was a Friend of Mine

Answer 3

你也可以这样做：

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

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

    el.focus();
});​

此代码适用于和。已在最新的浏览器中测试通过：Firefox 23、IE 11 和 Chrome 28。</br><div class="h-2"></div>可在此处查看<code>jsFiddle</code>: <a href="http://jsfiddle.net/cG9gN/1/" rel="nofollow noreferrer">http://jsfiddle.net/cG9gN/1/</a> 来源：<a href="https://dev59.com/sGcs5IYBdhLWcg3wrl_C#12654402">https://dev59.com/sGcs5IYBdhLWcg3wrl_C#12654402</a>

- Leniel Maccaferri

Answer 4

您可以使用这个https://github.com/DrPheltRight/jquery-caret工具。

$('input').caretToEnd();

- spilliton

Answer 5

这是我在onclick或其他事件中用于文本区域的方法，在FireFox和IE 7&8中似乎都可以正常工作。它将光标定位在文本末尾而不是开头。

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

- Ken

---

对我来说唯一有效的解决方案（Chrome v61）。 - Jacob

Answer 6

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

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

- Selvamani

Answer 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...");

- bn00d