在javascript中将光标放在文本框的末尾答案

【问题标题】：Putting cursor at end of textbox in javascript在javascript中将光标放在文本框的末尾
【发布时间】：2019-01-24 13:45:17
【问题描述】：

我有一个文本框，当我聚焦时，我希望光标移到文本框的末尾。

不断出现的解决方案就是

this.value = this.value

我已经用一个简单的方法onclick尝试了这个：

function InputClicked(element) {
    element.className = "inputfocused";
    element.value = element.value;
}

但奇怪的是 this ，它似乎走到了结尾，然后跳到了文本框的开头。

【问题讨论】：

标签： javascript html

【解决方案1】：

您必须聚焦元素并设置插入符号位置

这个JSFiddle 向您展示了它是如何工作的。在这个例子中为了简单起见使用了 jQuery，但如果需要，可以完全省略它。 setSelectionRange 函数无论如何都是一个 DOM 函数。

一般来说是这样的：

input.focus();
input.setSelectionRange(inputValueLength, inputValueLength);

可以使用 DOM 功能或使用库函数（如在 jQuery 中）获得输入及其值长度。

我们需要输入值的长度吗？

我没有在其他浏览器中测试过，但在 Chrome 中运行它允许设置比实际位置更大的位置，并且插入符号将定位在最后。所以像：

input.setSelectionRange(1000,1000);

将按预期工作（前提是您的文本少于 1000 个字符。:)

注意：IE8 及更早版本不支持此功能。大多数使用的浏览器的所有最新版本都支持它。对于旧版本的 IE，请使用文本范围。

【讨论】：

这在 IE 8 及更低版本中不起作用，不支持setSelectionRange()。
@TimDown：确实如此。让我在上面写一个注释。

【解决方案2】：

您需要使用输入的selectionStart 和selectionEnd 属性或setSelectionRange() 方法移动插入符号。但是 IE createTextRange() 方法。

代码：

function moveCaretToEnd(el) {
    el.focus();
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

【讨论】：

【解决方案3】：

简单且 100% 工作

1.Focus
2.Take the value
3.Empty It
4.Put the value back 



        $("#catg_name").focus();
        var value = $("#catg_name").val();
        $("#catg_name").val('');
        $("#catg_name").val(value);

【讨论】：