TextInput游标在重新获得焦点时自动移动到前面

时间:2013-08-18 03:39:03

标签: javascript jquery

我得到了这种非常奇怪的行为......

以下是我的代码的简化版本:

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”具有焦点时按下DOWN键,焦点将转移到“#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);

});

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

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

很抱歉让问题混乱,但这是我能做的最好的事情:((

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

感谢!!!


PS

刚刚将其添加到JSFiddle

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

1 个答案:

答案 0 :(得分:2)

你几乎就在这里..改变你的代码:

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

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

});

如果没有解决它,id喜欢在jsfiddle上看到它