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

I have a textarea and a button on a form. The textarea may already have some text in it. I would like the cursor to move to the last position in the text area when the button is clicked.

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

Is this possible?

这是可能的吗?

7 个解决方案

#1

By “the last position”, do you mean the end of the text?

你说的“最后的位置”是指课文的结尾吗?

Changing the ‘.value’ of a form field will move the cursor to the end in every browser except IE. With IE you have to get your hands dirty and deliberately manipulate the selection, using non-standard interfaces:

改变”。表单字段的值将在除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;
    }

Or do you mean put the cursor back to the place it was previously, the last time the textarea was focused?

或者你的意思是把光标放回原来的位置，也就是上次文本区域被聚焦的时候?

In every browser except IE, this will already happen just by calling ‘element.focus()’; the browser remembers the last cursor/selection position per input and puts it back on focus.

在除IE之外的所有浏览器中，只要调用“element.focus()”，就会发生这种情况;浏览器记住每个输入的最后一个光标/选择位置，并将它重新放在焦点上。

This would be quite tricky to reproduce in IE. You would have to poll all the time to check where the cursor/selection was, and remember that position if it was in an input element, then fetch the position for a given element when the button was pressed and restore it. This involves some really quite tedious manipulation of ‘document.selection.createRange()’.

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

I'm not aware of anything in jQuery that would help you do this, but there might be a plugin somewhere perhaps?

我不知道jQuery中有什么可以帮助您实现这一点，但是可能在某个地方有一个插件?

#2

xgMz's answer was best for me. You don't need to worry about the browser:

xgMz的回答对我来说是最好的。你不需要担心浏览器:

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

And here's a quick jQuery extension I wrote to do this for me next time:

下面是我为下次做的一个jQuery扩展:

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

Use like this:

使用这样的:

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

#3

You can also do this:

你也可以这样做:

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

    var elemLen = el.value.length;

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

    el.focus();
});

This code works for both input and textarea. Tested with latest browsers: Firefox 23, IE 11 and Chrome 28.

此代码适用于输入和文本区域。使用最新的浏览器进行测试:Firefox 23, IE 11和Chrome 28。

jsFiddle available here: http://jsfiddle.net/cG9gN/1/

jsFiddle可用:http://jsfiddle.net/cG9gN/1/

Source: https://*.com/a/12654402/114029

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

#4

You could use this https://github.com/DrPheltRight/jquery-caret

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

$('input').caretToEnd();

#5

This is what I use for textareas inside my onclick or other events and seems to work fine for FireFox and IE 7 & 8. It positions the cursor at the end of the text instead of the front.

这是我在onclick或其他事件中使用的文本区域，对于FireFox和IE 7 & 8来说似乎很好用。它将光标放在文本的末尾而不是前面。

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

#6

To set mouse focus and move cursor to end of input. Its work in every browser, Its just simple logic here.

设置鼠标焦点并将光标移动到输入端。它在所有浏览器中都能运行，这里的逻辑很简单。

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

#7

I modified @mkaj extension a little to support default value

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

#1