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

时间:2009-03-12 03:46:15

标签: javascript jquery position textarea mouse-cursor

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

这可能吗?

7 个答案:

答案 0 :(得分:34)

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

答案 1 :(得分:25)

通过“最后一个位置”,您的意思是文本的结尾吗?

更改表单字段的'.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中有什么可以帮助你做到这一点,但也许某个地方可能有一个插件?

答案 2 :(得分:6)

你也可以这样做:

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

    var elemLen = el.value.length;

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

    el.focus();
});​

此代码适用于inputtextarea。使用最新浏览器进行测试:Firefox 23,IE 11和Chrome 28。

jsFiddle可在此处找到:http://jsfiddle.net/cG9gN/1/

来源:https://stackoverflow.com/a/12654402/114029

答案 3 :(得分:4)

您可以使用此https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

答案 4 :(得分:3)

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

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

答案 5 :(得分:2)

设置鼠标焦点并将光标移动到输入结束。它在每个浏览器中工作,这里只是简单的逻辑。

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

答案 6 :(得分:0)

我修改了@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...");