用 jQuery 模拟按 Tab 键答案

【问题标题】：Simulate pressing tab key with jQuery用 jQuery 模拟按 Tab 键
【发布时间】：2012-03-02 02:47:25
【问题描述】：

我在 .net 页面上有一些文本框，想用 jQuery 实现以下功能：如果用户按下回车键，程序应该表现得“好像”他使用了 tab 键，因此选择下一个元素。我尝试了以下代码（以及更多）：

<script type="text/javascript">

jQuery(document).ready(function () {

    $('.tb').keypress(function (e) {
        if (e.keyCode == 13)
        {
            $(this).trigger("keydown", [9]);
            alert("return pressed");
        } 
    });
});

<asp:TextBox ID="TextBox1" runat="server" CssClass="tb"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="tb"></asp:TextBox>

但它只是不起作用！遗漏了什么，犯了错误？

这是我使用的一些链接

here

and here

【问题讨论】：

嗯，不；因为您没有将事件传递给函数。您需要使用：$('.tb').keypress(function(e){，然后该函数可以访问事件，然后event.keyCode，尽管我认为e.which 是规范化的jQuery 版本（可能需要也可能不需要）。
你能澄清“不起作用”吗？发生什么了？得到任何 JS 错误？
@DavidThomas：谢谢，已修复。
@ChristoferEliasson：什么都没发生。
Simulating the TAB keydown: focusing next element as determined by `tabIndex`的可能重复

标签： jquery keydown simulate

【解决方案1】：

试试这个：

http://jsbin.com/ofexat

$('.tg').bind('keypress', function(event) {
  if(event.which === 13) {
    $(this).next().focus();
  }
});

或循环版本：http://jsbin.com/ofexat/2

【讨论】：

谢谢，但这仅在找到以下同级元素时才有效，还是我弄错了？但它应该在任何情况下都有效。
你想循环元素吗？
如果元素是这样的将无法正常工作。 <input class="input"><br><input class="input"><button> 第一个输入时输入找不到下一个输入，但找到了br。使用next('.input') 还是不行。

【解决方案2】：

我创建了一个simple jQuery plugin，它确实解决了这个问题。它使用 jQuery UI 的 ':tabbable' 选择器来查找下一个 'tabbable' 元素并选择它。

示例用法：

// Simulate tab key when enter is pressed           
$('.tb').bind('keypress', function(event){
    if(event.which === 13){
        if(event.shiftKey){
            $.tabPrev();
        }
        else{
            $.tabNext();
        }
        return false;
    }
});

【讨论】：

谢谢，我没有使用hole插件，但是带有 :tabbable 的选择器是一个不错的脑洞：P
请注意:tabbable需要jQuery UI依赖
我喜欢！对于我的用例，我修改了 javascript 以在每个函数的末尾包含 selectables.eq(prevIndex).select();，以模拟 Tab 键选择下一个输入内容的方式。

【解决方案3】：

从多个答案中，我为我组合了完美的解决方案，其中 enter 充当输入和选择的选项卡，并专注于下一个输入、选择或文本区域，同时允许在文本区域内输入。

 $("input,select").bind("keydown", function (e) {
     var keyCode = e.keyCode || e.which;
     if(keyCode === 13) {
         e.preventDefault();
         $('input, select, textarea')
         [$('input,select,textarea').index(this)+1].focus();
     }
 });

【讨论】：

这对我的项目来说几乎是完美的，但我不需要它来标记每个单选按钮。跳过同名输入的循环起到了作用。 var nextInput = $('input,select,textarea')[$('input,select,textarea').index(this)+1]; while ($(this).attr('name') === $(nextInput).attr('name')) { nextInput = $('input,select,textarea')[$('input,select,textarea').index(nextInput)+1]; } 它仍然卡在隐藏的输入中。通常它们可能位于表单的顶部，但我有一个条件隐藏的输入，它必须重新出现在正确的位置。
if (keyCode === 13) { 更好

【解决方案4】：

试试这个

$(this).trigger({
    type: 'keypress',
    which: 9
});

【讨论】：

谢谢，但它仍然没有反应。
检查 JS 控制台是否有错误，也可以尝试在干净的 HTML 文件中单独运行代码，看看是否可以生成所需的特定情况。比尝试将其移动到您的主文件。
你能提供一个好的小提琴吗？因为我试过了，没用。见here。
对我也不起作用 - Code Pen.
@SaeedNamati 我已经更新了小提琴。 $(function() { $('#first').focus(); $('button').click(function() { $('#first').trigger({ type: 'keypress', which: 9 }); }); $('#first').on('keypress', function(e) { if (e.which == 9) { alert("Tab Pressed!"); $(this).next().focus(); } }); });