2016-11-12 211 views
5

當我第一次按下tab按鈕時,它會起作用,並且tab被阻止,但是如果我馬上再次按下它,默認情況不會被阻止,並且我將輸入框。event.preventDefault()只能工作一次

如果我輸入一些東西,然後選項卡,然後輸入別的東西,然後標籤,那麼它是默認阻止每次

的問題是我不能連續兩次Tab。任何想法可能是什麼問題?

$("#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> 
+1

你能爲此創建一個CodePen或JSFiddle嗎? – RobertAKARobin

+0

你是否正在用其他代碼替換你的'#functionSearch'元素? –

+0

@RobertAKARobin jsfiddle甚至沒有阻止它一次,所以即時通訊代碼筆https://jsfiddle.net/6n0qfqt4/ – code511788465541441

回答

2

的時候keyup被激發,TAB鍵可能已經做了焦點移動到另一個元素的它的工作,這意味着keyup事件將其他元素上被觸發,而不是輸入被解僱領域。

最簡單的解決方案是聽取​​而不是keyup(請參閱working fiddle)。

1

你有一些事情正在進行。您正在使用鍵控,當您按Tab鍵時,您撥打event.preventDefault()的選項卡焦點已移至下一個元素。 接下來,你有propertychange和改變監聽器,和以前一樣。此外,當您第二次按兩次選項卡時,由於該屬性沒有第二次更改,所以沒有變化!您必須使用keydown而不是keyup,並檢查您的事件被解僱的順序!