聚焦时将光标设置到文本框末尾

Question

问题:

当某个文本框获得焦点时，将插入符号设置为文本框的末尾。解决方案需要在IE7、Opera、Chrome和Firefox中运行。
为了使事情变得更加容易，只在当前文本框的值是固定值（比如“INIT”）时需要这种行为。

不完整的解决方案:

人们会认为这很简单，但我找不到一个适用于所有浏览器的SO答案。以下答案都不可行：

$("#test").focus(function() {
  // This works for Opera only
  // Also tested with $(this).val($(this).val());
  if (this.value == "INIT") {
    this.value = "";
    this.value = "INIT";
  }
});

$("#test").focus(function() {
  // This works for IE and for Opera
  if (this.value == "INIT") {
    setCaretPosition(this, 4);
  }
});

我在SO的问题中找到了setCaretPosition函数，并在不同的博客上看到它:

function setCaretPosition(ctrl, pos) {
        if (ctrl.setSelectionRange) {
            //ctrl.focus(); // can't focus since we call this from focus()
            // IE only
            ctrl.setSelectionRange(pos, pos);
        }
        else if (ctrl.createTextRange) {
            // Chrome, FF and Opera
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);   // Also tested with this
            range.moveStart('character', pos); // and this line in comment
            range.select();
        }
}

Fiddle（JSFiddle）

我已经搭建好了一个JSFiddle。

- Laoujin

---

你能更具体地说明它在哪里以及如何不起作用吗？ - jonvuri

在 Firefox 和 Chrome 中，所有文本都会被选中。 - Laoujin

Answer 1

试试这个：

$("input").on("focus", function() {
    if (this.value === "INIT") {
        var input = this;
        setTimeout(function() {
            if (input.createTextRange) {
                var r = input.createTextRange();
                r.collapse(true);
                r.moveEnd("character", input.value.length);
                r.moveStart("character", input.value.length);
                r.select();
            }
            else {
                input.selectionStart = input.selectionEnd = input.value.length;
            }

        }, 13);
    }
});

http://jsfiddle.net/azBxU/4/

- Esailija

---

你为什么将超时设置为13毫秒？ - surj

太好了！这对Opera、Chrome和Firefox都有效。我已经有了针对IE的东西，所以终于可以把这个问题解决了。非常感谢 :) - Laoujin

谢谢谢谢谢谢。这在IE兼容模式下起作用。 - Jared Beach

Answer 2

这应该可以工作：

$("#test").focus(function() {
    var $this = $(this);
    var value = $this.val();
    if (value === "INIT") {
        setTimeout(function() {
            $this.val(value);
        }, 0);
    }
});

- surj

---

这只在Chrome中有效。如果我只能得到一个适用于FF的解决方案，我可以将这3个解决方案结合起来，使其适用于所有浏览器 :) - Laoujin

Answer 3

我找到了一个jQuery插件，它已经为我工作了很长时间。不过我忘记了它是在哪里找到的。

(function($)
{
    jQuery.fn.putCursorAtEnd = function() {
    return this.each(function() {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange) {
            // ... then use it
            // (Doesn't work in IE)

            // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
            var len = $(this).val().length * 2;
            this.setSelectionRange(len, len);
        } else {
            // ... otherwise replace the contents with itself
            // (Doesn't work in Google Chrome)
            $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);

- Per Salbark