javascript - TextInput 光标重新获得焦点时会自动移动到前面

Question

我的行为真的很奇怪..

这是我的代码的简化版本:

DOWN = 40;
UP = 38;

$(document).on("keydown", "#text_input", function(e) {
    if (e.keyCode == DOWN) {
        $("#list").focus();
    }
});

$(document).on("keydown", "#list", function(e) {
    if (e.keyCode == UP) {
        $("#text_input").focus();
    }
});

所以基本上，如果用户在“#text_input”获得焦点时按下向下键，焦点就会转移到“#list”。 反过来，当用户将焦点放在“#list”上然后按向上键时，“#text_input”将重新获得焦点。

这工作正常，除了“#text_input”中的光标在重新获得焦点时自动移动到文本值的前面。我想防止这种情况发生，以便用户可以在将焦点切换到“#list”之前从上次中断的位置继续输入。

我在 Stackoverflow 上搜索了一种将光标移动到文本输入末尾的方法，并找到了这个解决方案:

$(document).on("focus", "#text_input", function() {

    value = $("#text_input").val();
    $("#text_input").val("");
    $("#text_input").val(value);

});

仅当我使用鼠标事件切换焦点时，这实际上才将光标移动到末尾。例如，当我单击页面的空白部分然后重新单击“#text_input”时，光标确实移动到了输入的末尾。

但是，奇怪的是，当我使用我的功能(即按向下键，然后按向上键)重新获得焦点时，这不起作用。光标仍然移动到文本字段的前面。

很抱歉让问题变得困惑，但这是我能做的最好的:((

有谁知道为什么会发生这种情况以及任何可能的解决方案吗？

谢谢!!!

附注

刚刚将其添加到 JSFiddle

http://jsfiddle.net/jakeaustin5574/AU9CA/3/

Answer 1

你就快到了..将你的代码更改为:

$(document).on("focus", "#text_input", function() {

    value = $("#text_input").val();
    $("#text_input").val("");
    setTimeout(function(){
       $("#text_input").val(value);
    }, 0);

});

如果这不能解决问题，我想在 jsfiddle 上看到它