標籤keydown事件對我有拍攝日期上輸入標籤的keydown事件的問題HTML5日期輸入

Question

。說我有五個輸入，第一個和最後這些都是日期輸入的形式（這裏的HTML參考...我知道它缺少ID，tabindex屬性等）：

<form id="heyImAForm"> 
    <input type="date" id="in1" /> 
    <input type="text" id="notimportant2" /> 
    <input type="text" id="notimportant3" /> 
    <input type="text" id="notimportant4" /> 
    <input type="date" id="in5" /> 
</div> 

我」什麼當用戶Shift-Tabs出第一個輸入，並且當用戶Tabs出最後一個輸入時，d喜歡做的是調用方法。

的問題是，我想保留日期輸入，這是日/月/年之間移動本地Tab鍵的行爲。所以，這樣的事情：

$('#in1').keydown(function(e) { 
    if (e.which == 9 && e.shiftKey) { 
     doAThing(); 
    } 
}); 
$('#in5').keydown(function(e) { 
    if (e.which == 9) { 
     doADifferentThing(); 
    } 
}); 

....「工程」，但有效地殺死該原生Tab鍵行爲。因此，長話短說，如果焦點從日期輸入偏離，而不是在日/月/年之間移動，有沒有辦法只觸發Tab鍵事件？

Answer 1

在嘗試了幾件事情後，我認爲最好的解決辦法是你所看到的here但請仔細閱讀，得到的我在做什麼有充分的瞭解。我們正在設置focusout，當用戶在第一個元素上點擊shift-tab或者在第二個元素上沒有選項卡時移動。如果用戶碰到別的東西，我們必須解除這個動作，所以如果他們移動標籤但不停留在元素內，那麼我們不會觸發該動作。因此，嘗試這樣的事情：

$('#in1').keydown(function(e) { 
    if (e.which == 9 && e.shiftKey) { 
    $(document).mousedown(function(){ 
     $('#in1').unbind('focusout'); 
     $(document).unbind('mousedown'); 
    }); 
    $('#in1').focusout(function(){ 
     doAThing(); 
    }); 
    } else { 
    $('#in1').unbind('focusout'); 
    $(document).unbind('mousedown'); 
    } 
}); 
$('#in5').keydown(function(e) { 
    if (e.which == 9 && !e.shiftKey) { 
    $(document).mousedown(function(){ 
     $('#in5').unbind('focusout'); 
     $(document).unbind('mousedown'); 
    }); 
    $('#in5').focusout(function(){ 
     doADifferentThing(); 
    }); 
    } else { 
    $('#in5').unbind('focusout'); 
    $(document).unbind('mousedown'); 
    } 
}); 

你可以看到，我們也設置整個文檔的mousedown了Shift-Tab（IN1）或選項卡，而無需移（IN5）被擊中時。在mousedown我們解除綁定focusout所以如果焦點離開，因爲鼠標的點擊，我們不火doAThing()。我們還在文檔上解除了mousedown，因爲您不希望每當用戶在這些元素的tab（in5）或shift-tabbing（in1）之後單擊時都會觸發它。

您還可能有興趣在看到我做了this fiddle。這不是最好的解決方案，因爲setTimeout在很多情況下會導致一些問題和不良後果。

此外，在您提供的代碼中，結束標記應該是</form>而不是</div>。