javascript - jQuery 手动调用 focus() 不会触发整个事件

Question

当我单击或切换到文本输入时，此事件将被触发并完美运行:

//highlight input contents and row/col when clicked
$("input[type=text]").focus(function() {
    //highlight input contents
    $(this).select();

    //highlight new row/col
    $(this).parent().siblings().first().css({"color":"#f2f7fa"}); //row
    var index = $(this).parent().index();
    $(this).parent().parent().siblings().first().children().eq(index).css({"color":"#f2f7fa"}); //col
});

但是，当手动调用 focus() 方法时...

//arrow keys move focus to adjacent cells
$(document).keydown(function(e){
    if (e.keyCode == 37) { //left
        var $inputs = $('input[type=text]');
        $inputs.eq($inputs.index($('input[type=text]:focus')) - 1).focus();
    }
});

...输入的内容没有突出显示，即。 select() 不起作用。但是行/列的文本被突出显示!因此，只有该函数的第二部分有效!这是为什么？

Answer 1

编辑:抱歉，由于对问题的误解，我的第一个答案不正确。试试这个...

问题是有与箭头键相关的特殊行为 - 我不确定具体是什么导致了这个问题，但是阻止默认行为可以修复它。 (下面倒数第三行:)

//highlight input contents and row/col when clicked
$("input[type=text]").focus(function() {
    //highlight input contents
    $(this).select();

    //highlight new row/col
    $(this).parent().siblings().first().css({"color":"#f2f7fa"}); //row
    var index = $(this).parent().index();
    $(this).parent().parent().siblings().first().children().eq(index).css({"color":"#f2f7fa"}); //col
});

$(document).keydown(function(e){
  
    if (e.keyCode == 37) { //left
        var $inputs = $('input[type=text]');
        $inputs.eq($inputs.index($('input[type=text]:focus')) - 1).focus();
        
        e.preventDefault();
    }
    
    if (e.keyCode == 39) { //right
        var $inputs = $('input[type=text]');
        var nextIdx = $inputs.index($('input[type=text]:focus')) + 1;
        nextIdx = nextIdx >= $inputs.length ? 0 : nextIdx;
        $inputs.eq(nextIdx).focus();
        
        e.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="text" value="test">
<input type="text" value="test">
<input type="text" value="test">