Javascript 在Ext JS中以编程方式将选项卡切换到下一个控件

我在ExtJS2.x中编写了一个包装器UX控件，用于处理稍微不同的按键操作。特别是，当日历显示时，我希望Tab键选择突出显示的日期并移动到下一个表单字段

我已经让键处理程序工作了——它选择突出显示的日期并关闭日历——但我无法让它转到下一个字段

我是否必须从制表符顺序中找出下一个字段并尝试设置其焦点？这似乎很复杂。或者我是否可以触发一些事件，让我的控件自动将tab键转到下一个字段（即，在日历中捕获tab键并按我正在做的方式处理它，然后将其转发到基础日期字段）

---

---

编辑：总之，是否有一种Ext（或至少跨平台）方法可以在特定表单字段触发键盘事件？

方法一。只需在按键/keyup事件处理程序中不执行

事件。preventDefault（）

，这样就不会阻止浏览器执行默认操作，即选项卡导航。此示例适用于：

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        listeners: {
            specialkey: function(me, e) {
                if (e.getKey() == e.TAB) {
                        console.log('Tab key pressed!');
                        // do whatever you want here just don't do e.preventDefault() or e.stopEvent() if you want the browser tab to next control
                    }
            }
        }
    }, {
        xtype: 'textfield',
        name: 'email',
        fieldLabel: 'Email Address',
    }]
});

我在Ext4中尝试了它，但是从Ext2开始，所有的基本方法都应该可用。 如果您仍然遇到问题，请分享您的一些代码

让路，让浏览器以本机方式完成任务通常是最好、最健壮的解决方案

---

方法二。如果您有一个包含多个元素的复杂组件，您仍然可以实现方法一的情况。通过强制聚焦在主输入元素（通常是文本字段）上，同时使用CSS模拟弹出元素内的聚焦项目（这里主输入元素中的a/比较方便）。基本上，您只需捕获所有情况，即用户可以在弹出窗口上设置焦点（如单击），然后将焦点捕捉回主元素

这将仍然确保html元素的自然选项卡顺序，即使其中一些不是组件。我相信这是最好的方式去做，值得努力实现大部分时间

这就是组件喜欢和工作的方式（正如您所看到的，后者总是在更新变量后将焦点设置到主元素。组合框的焦点逻辑有点复杂。如果您对如何在组件中实现它感到困惑，请查看源代码链接，非常有见地

---

方法三。最后一种方法。如果您仍然需要以编程方式关注另一个（相邻）字段，那么这相对容易做到。 Ext2.3的代码（虽然没有测试，但我使用的是文档）：

---

---

另外，您可以通过dispatchEvent（）人工触发

选项卡

按键，但出于安全原因，它会禁用选项卡导航操作。

您可以使用dispatchEvent（），这可能与@pckill有关：这当然很有趣，尽管从注释来看，它似乎只在某些浏览器上起作用。是否还有更多的“Exty”我还没有使用ExtJS，但是如果你知道下一个表单字段是什么，你不能使用像.focus（）或.select（）这样的方法吗当按下

选项卡

键时，如果您能提供一些您已经使用过的代码，会更容易帮助您。@micnic我知道应该用选项卡隔开的字段，但不知道下一个字段（因为日期字段是可以嵌入任何页面的组件）。我可能可以手动计算出下一个字段，但很难让它与自定义选项卡顺序一起工作。我宁愿只使用原始文本字段以正常方式处理选项卡。但我在日历面板中捕获消息时遇到问题，但随后将其由与之相关的textbox控件处理。+1 for PS。不幸的是，

日期字段

有两个部分：我正在捕获日历上的选项卡，但我需要文本字段对其进行处理。我没有人为停止事件，但它从未从日历传递到文本字段。非常感谢更新。方法II和III看起来很有希望。我将尝试一下汇报（可能要到星期一）。我使用方法III实现了它。因为我正在处理一个组件，所以我不得不求助于一些标准的Javascript DOM遍历来查找下一个

输入

，

选项

，

按钮

或

文本区域

，然后稍微延迟一下，然后聚焦它。感谢您帮助我实现了这一点。不客气。Ke请记住，这种方法不是防弹的，因为实际上很难捕获所有可聚焦的dom元素（并保持其选项卡顺序）。任何具有

tabindex

属性的元素都可以聚焦。在您的情况下，这可能无关紧要，但请记住，人工实现的导航可能不同于“自然导航”，浏览器实现。这就是为什么我建议尽可能采用第二种方法。

var formPanel,  // containing form panel
    currentField, // the field you need to navigate away from

    fields,
    currentFieldIdx,
    nextField;

fields = formPanel.getForm().items;
currentFieldIdx = fields.indexOf(currentField);

if(currentFieldIdx > -1) {
    nextField = fields.itemAt(currentFieldIdx + 1);
    nextField && nextField.focus();
}