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

编辑：道歉，我的第一个答案是不正确的，因为对问题的误解。试试这个......

问题是箭头键上有特殊的行为 - 我不确定是什么导致了这一点，但是防止默认行为会修复它。（下面的第三行到最后一行：）

＆＃13;

//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();
    }
});

＆＃13;

<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">

＆＃13;

jQuery手动调用focus（）不会触发整个事件

1 个答案: