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

Question

我有一个文本框,当我对焦时,我希望光标转到文本框的末尾.

不断涌现的解决方案就是

this.value = this.value

我用一个简单的方法尝试了这个:

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

但奇怪的是这个,它似乎转到结束然后跳到文本框的开头.

Answer 1

你必须集中元素并设置插入位置

这个JSFiddle向您展示它是如何工作的.在这个例子中,jQuery已被用于简化,但如果需要,可以完全省略它.setSelectionRange无论如何,函数是一个DOM函数.

通常它会这样做:

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

可以使用DOM功能或使用库函数(如jQuery中)获取输入及其值长度.

我们需要输入值长度吗？

我还没有在其他浏览器中测试过,但是在Chrome中运行它可以设置比实际位置更大的位置,插入符号将位于最后.所以类似于:

input.setSelectionRange(1000,1000);

将按预期工作(假设您的文本短于1000个字符.:)

注意:IE8及更早版本不支持此功能.最常用的浏览器的所有最新版本都支持它.对于旧版本的IE诉诸文本范围.

Answer 2

您需要使用输入的selectionStart和selectionEnd属性或setSelectionRange()方法移动插入符.IE <9不支持这些,因此您需要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();
    }
}