Blazor中输入时间字段时，如何禁用图标元素的Tab聚焦？

开发工时录入项目时，使用<input type="time">组件填写开始/结束时间，输入完成后按Tab键，焦点会先跳到输入框旁的自定义图标上，希望Tab仅聚焦输入区域。已尝试设置tabIndex="-1"但无效，仅能修改图标相关CSS。

解决方案 #

1. 使用标准tabIndex="-1"值 #

你当前设置的tabIndex="-2"不是HTML标准有效值，标准中仅支持：

• -1：无法通过Tab键聚焦，但可通过代码触发聚焦
• 0：按默认Tab顺序参与聚焦
• 正整数：自定义Tab聚焦优先级

将图标元素的tabIndex改为标准的-1：

<div class="icon solid start" tabIndex="-1">@Icons.Startzeit</div>

2. 禁用图标交互（装饰性图标适用） #

如果该图标仅作视觉装饰，不需要任何交互（点击、选中等），可以通过CSS彻底阻止它获得焦点：

.icon.solid.start {
  pointer-events: none; /* 禁用所有点击、聚焦类交互 */
  user-select: none;    /* 禁止选中图标内的文字/内容 */
}

3. 焦点强制回退到输入框（兜底方案） #

如果以上方法仍无效，可利用Blazor的元素引用，在图标意外获得焦点时，强制将焦点切回time输入框：

<div class="icon solid start" tabIndex="-1" @onfocus="() => startTimeElement.Focus()">@Icons.Startzeit</div>

注：确保输入框的@ref="startTimeElement"已正确绑定（你的代码中已配置）。

4. 验证DOM渲染结果 #

打开浏览器开发者工具，检查图标元素的实际DOM属性，确认tabIndex="-1"是否被正确渲染，避免Blazor组件逻辑导致属性未生效。

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