Vaadin 23如何将read-only字段排除在tabbing order之外

核心实现逻辑基于原生HTML标准属性：给可聚焦元素设置tabindex="-1"即可将元素从Tab键遍历顺序中移除，同时不影响元素的鼠标点击聚焦、文本选中复制、屏幕阅读器识别等所有原有交互，完全不需要修改字段的只读/禁用状态，完全匹配需求。

单字段快速配置 #

所有Vaadin标准输入组件（TextField、NumberField、DatePicker、ComboBox等）都实现了HasTabIndex接口，直接调用组件自带的Tab索引设置API即可，无需操作底层DOM：

// 示例：给只读文本框设置
TextField demoField = new TextField("示例只读字段");
demoField.setReadOnly(true);
// 移出Tab遍历顺序，保留所有只读交互能力
demoField.setTabIndex(-1);

如果后续需要把字段改回可编辑状态，只要调用setTabIndex(0)即可让字段重新回到默认Tab顺序中。

如果遇到极少数未实现HasTabIndex的自定义组件，可以直接操作组件的可聚焦元素设置属性，效果一致：

customReadonlyComponent.getElement().setAttribute("tabindex", "-1");

批量全局自动处理 #

如果项目中只读字段数量较多，不需要逐个字段手动配置，可以注册全局服务初始化监听器，自动监听所有组件的只读状态变化，自动同步Tab索引设置：

import com.vaadin.flow.server.ServiceInitEvent;
import com.vaadin.flow.server.VaadinServiceInitListener;

public class AutoReadonlyTabindexConfig implements VaadinServiceInitListener {
    @Override
    public void serviceInit(ServiceInitEvent event) {
        event.getSource().addUIInitListener(uiInitEvent -> {
            // 监听当前UI下所有元素的readonly属性变化
            uiInitEvent.getUI().getElement().addPropertyChangeListener("readonly", changeEvent -> {
                boolean isReadonly = Boolean.TRUE.equals(changeEvent.getValue());
                if (isReadonly) {
                    changeEvent.getSource().setAttribute("tabindex", "-1");
                } else {
                    // 非只读状态移除自定义tabindex，恢复默认Tab顺序
                    changeEvent.getSource().removeAttribute("tabindex");
                }
            }, true);
        });
    }
}

注册该监听器后，所有调用setReadOnly(true)的组件会自动被移出Tab顺序，切回可编辑状态时自动恢复，不需要额外写业务代码。

注意事项 #

• 该方案完全区别于setDisabled(true)的实现：禁用状态下的字段无法被聚焦、无法选中复制文本、会触发禁用样式，本方案完全保留只读字段的默认样式和文本选择、复制能力，仅屏蔽Tab键的顺序聚焦
• 不要通过CSSpointer-events: none等属性实现该需求，这类方案会阻断鼠标交互，导致无法选中复制字段内容
• tabindex="-1"是W3C标准定义的行为，所有现代浏览器均兼容，不会出现兼容性问题

内容的提问来源于stack exchange，提问作者sdo