Question

如何在ZK中禁用 Tab 键？
或者，我怎样才能发生 Tab 键击的事件？

情况需要当用户按 Tab 键时不会发生任何事情，i。即必须禁用默认的 Tab 键功能。

Answer 1

我不完全喜欢改变已建立的键盘约定的想法，例如TAB将选项卡顺序中的下一个输入聚焦。但是，如果特殊情况需要此行为，您只需添加一个事件侦听器来捕获并阻止Tab键的默认操作（键码9）：

<script>
window.addEventListener(
    'keydown', 
    function(event) {
      if(event.keyCode == 9) event.preventDefault();
    }, 
    {capture: true}
);
</script>

在Windows 10上测试：Chrome / FF / Edge

这不是特定于ZK的，并且该脚本可以在任何其他html / JS页面上使用。

当您询问“如何在ZK中执行此操作”时，我想知道您是否有任何ZK问题导致您要禁用TAB键。

罗伯特

Answer 2

我们已经在我们的应用程序中替换了 Tab 的默认行为，因为我们想要更多控制：

禁用焦点标签，用于允许插入制表位的文本字段。
从焦点标签中排除“不必要的”字段：readonly字段，readonly组合框与隐藏的combobutton，放射组的每个单选按钮除外（保存用户点击）。
自定义焦点标签顺序（使用tabindex属性是不够的，因为我们的UI非常动态，因此可以在不同的窗口/面板/弹出窗口中具有相同索引的多个组件...因此，我们有仅在最近的容器父级的范围内处理tabindex。

我们从一个类似于Robert的答案的听众开始：

$(document).ready(function() { 
    $(document).keydown(function(event) {
        if(event.which === 9) {
            var current = getCurrentlyFocusedComponent();
            if (current.attr('tabindex') && new Number(current.attr('tabindex')) == -1) {
                doNonFocusStuff(current[0], event.shiftKey);                
                event.preventDefault();     
            } else {
                // default focus tabbing
                // or
                // custom focus tabbing with:               
                event.preventDefault();     
            }
        }
    });
});

如果您想完全禁用页面的 Tab ，那么简单的event.preventDefault()就足够了。在上面的示例中，您可以看到我们通过设置tabindex = -1来禁用仅针对某些组件的密钥。

如果您对我们如何手动执行焦点或添加制表位感兴趣，请告诉我，我可以分享代码。

至于按Tab键时发送事件，你可以在我上面显示的监听器中使用这一行：

zAu.send(new zk.Event(zk.$(current), "onTab", {foo: 'some data'}, {toServer: true}));

并在服务器端附加普通侦听器：

tabbedComponent.addEventListener("onTab", e -> Clients.showNotification("tabbed!"));

阅读本文，了解有关向服务器发送自定义事件的更多信息：https://www.zkoss.org/wiki/ZK_Client-side_Reference/Communication/AU_Requests/Client-side_Firing#Fire_Event_to_Widget：

如何在ZK中禁用Tab键？

2 个答案: