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”时，光标确实移动到了输入的末尾。

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

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

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

谢谢!!!

附言

刚刚将它添加到 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 上看到它