Question

我有一个3页的表格。当第一页填满后，用户点击“下一步”按钮进入下一页。

意图：如果用户按下标签键，则会显示一条消息，并且光标仍保留在“下一步”按钮中。

问题：当我按标签键时，信息会显示，光标仍保留在“下一步”按钮上。但是，第二次按 tab 键时，光标将转到下一页。

这是我的代码：

 <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

我在你的例子中看到，当第二次按下 tab 键时，光标会落入“第二页”的第一个字段。也许有一种更有效的方法来解决这个问题，但是这个怎么样？

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

    }
});

请注意，我正在强调焦点回到Next按钮。当然，我的JSFiddle并不反映页面的真实功能，但这可能会让您了解它的工作原理：

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

如果在关注“下一步”按钮后仍然显示第二页，则可以将其添加到上面的代码中，因此第二页根本不会显示。

$('.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;

     }
});

缺憾？是的，但我认为这会做你想要的。

按Tab键时，光标不会移动到下一个按钮

1 个答案: