當按Tab鍵時光標不移動到下一個按鈕

Question

我有一個3頁的表單。當第一頁填滿後，用戶通過點擊「下一步」按鈕進入下一頁。

意向：如果用戶按下標籤鍵，一個消息顯示，光標保持在「下一個」按鈕。

問題：當我按下標籤密鑰的消息顯示，光標保持在「下一個」按鈕。但是，第二次按下鍵標籤時，光標將進入下一頁。

這裏是我的代碼：

<div class="next"><a class="next-button" href="#second">Next</a></div> 

$('.next-button').on("keyup", function(event) { 
if (event.which == 9) { 
    alert('Click Next button to go to the next Page'); 
    return false; 
} 
}); 

Answer 1

我看到，在你的榜樣，當標籤鍵被按下光標第二次落入你的「第二頁」的第一個字段。也許有一個更有效的方法來解決這個問題，但這又如何？

$('.next-button').on("keydown", function(event) { 
    if (event.which == 9) {  
     alert('Click Next button to go to the next Page'); 
     this.focus();    
     return false; 

    } 
}); 

注意到，我迫使焦點回到下一步按鈕。我的jsfiddle，當然，並不能反映你的頁面的真正的功能，但是這可能給你的是如何工作的想法：

http://jsfiddle.net/BBWxz/1/

如果第二頁仍集中在後仍顯示出來Next按鈕，那麼你可以將它添加到上面的代碼中，所以第二個頁面根本不顯示。

$('.second-page').hide(); 

所以基本上，代碼應該是這樣的：

$('.next-button').on("keydown", function(event) { 
    if (event.which == 9) {  
     alert('Click Next button to go to the next Page'); 
     this.focus(); 
     $('.second-page').hide(); 
     return false; 

    } 
}); 

缺憾？是的，但我認爲這會做你想做的。