Question

当我第一次按下标签按钮时，它会起作用并且标签被阻止，但是如果我再次立即按下它，则不会阻止默认设置，并且我会从输入框中跳出。

如果我输入内容然后选项卡然后键入其他内容然后选项卡，那么每次都会阻止默认值

问题是我无法连续两次选项卡。知道可能是什么问题吗？

 $("#functionSearch").on("change propertychange keyup",function( event ) {
    event.preventDefault();
    console.log(event)
    if (event.which == 9 ) {
        console.log("TAB")
    }else{
        clearHighlight();
        var input = $(this).val();
        if(input.length > 0){
            filteredArr = jQuery.grep(linksArr, function( val, index ) {
                return ( val.toLowerCase().indexOf(input.toLowerCase()) != -1);
            });
            selectElements(filteredArr);
        }
    }

});

// MAY BE USEFUL
function selectElements(filteredArr){
    $(filteredArr).each(function( index, link){
       var id = link.split("~")[1]
       $("#"+id).addClass("selected");
    });
    highlightFirstElement();
    }

    function highlightFirstElement(){
        $(".selected").first().addClass("highlighted");
    }

    function highlightNextElement(){
        $(".selected").next().addClass("highlighted");
    }

    function clearHighlight(){
        $(".highlighted").removeClass("highlighted");
        $(".selected").removeClass("selected");
    }

<div id="functionSearchDiv" class="funSearch">
    <input type="text" id="functionSearch"></input>
</div>

Answer 1

当keyup被触发时，TAB键可能已经完成了将焦点移到另一个元素的工作，这意味着keyup事件将在该另一个元素上触发而不是在输入字段上触发。

最简单的解决方案是收听keydown而不是keyup（请参阅working fiddle）。

Answer 2

你有几件事情要发生。当您按Tab键时，您正在使用键盘，通过调用event.preventDefault()的选项卡，焦点已移至下一个元素。接下来，你有了propertychange和change listener，和以前一样。此外，当您第二次按Tab键两次时没有变化，因为该属性第二次没有更改！您必须使用keydown而不是keyup并检查您的事件被触发的顺序！

event.preventDefault（）只能工作一次

2 个答案: