運行功能時，上/下箭頭用於在<select>

移動我有一個下拉菜單是這樣的：運行功能時，上/下箭頭用於在<select>

<select id="test"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select>

如果我要當用戶改變他們的選擇運行的東西，很容易與jQuery's .change()。但是，衆所周知，如果用戶的活動狀態爲<select>，並且只是通過向上/向下箭頭（或其他鍵盤導航方法）來移動選項，則此功能無效。

這是我的使用案例的問題。即使使用向上/向下箭頭查看不同選項，我也需要根據所選值觸發事件。

我不是第一個有這個問題的人。 Here's a discussion of this issue基本上說，如果你想在所有瀏覽器中處理這種情況，你必須尋找按鍵。其他類似的問題也有類似的答案。但是......它不起作用，我將在下面進行說明。

解決這個問題的最簡單方法是使用jQuery's .keypress()來注意何時<select>處於活動狀態並按下了一個鍵。事情是這樣的：

<select id="test"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

<div id="log"> 

<script> 
    var log = $("#log"); 
    var select = $("#test"); 
    select.change(function() { log.append(select.val() + "<br>"); }); 
    select.keypress(function() { log.append(select.val() + "<br>");; }); 
</script>

You can try it out here.

我在Chrome 25（Ubuntu的12.10和Windows XP），火狐19（Ubuntu的12.10），和IE 7（Windows XP）中測試了這一點，這是唯一的瀏覽器我馬上就到了。

我的代碼在除Firefox以外的所有系統都很好用。在我的例子中，點擊下拉菜單兩次，在菜單關閉的情況下選擇它，然後按「向下，向下，向下」（移動到2,3和4）和「向上，向上，向上」（移動到3， 2和1），你會看到這個輸出：

非常好，完美。但在Firefox中，完成相同的輸出：

它滯後一個條目。輸出的值是前一個值，而不是當前值。這是個問題。

任何想法如何解決它？

來源

2013-03-08 dumbmatter

難道說的按鍵處理程序執行前值正式的變化？如果是這樣，那麼很短的延遲可以解決問題嗎？ 'select.keypress（function（）{setTimeout（function（）{log.append（select.val（）+「
」）;}，100}）;'' – Steve 2013-03-08 20:04:36

在Firefox中change事件kepress事件解僱後，您可以使用keyup代替keypress：

select.keyup(function() { 
    log.append(this.value + "<br>"); 
});

http://jsbin.com/ezalav/3

來源

2013-03-08 20:04:33 undefined

運行功能時，上/下箭頭用於在<select>

回答

相關問題