html - MAC 上的 Safari 跳过输入字段

Question

我在一个表单上遇到了一个小问题，它有两个输入字段，表示时间(格式 HH:mm)非常接近，像这样:

这是 HTML 部分

<label>
    <span>Hour*</span>
    <input type="text" class="input-sm" ng-model="ev.date_mn" name="ev_date_mn" placeholder="00" maxlength="2" required/>
    <span class="divider">:</span>
    <input type="text" class="input-sm" ng-model="ev.date_hr" name="ev_date_hr" placeholder="00" maxlength="2" required/>
</label>

这是相应的 CSS 部分

.wrapper.crea-evento div.input-group div.input-section label > span {
    width: 40%;
}

.wrapper.crea-evento div.input-group div.input-section label > span.divider {
    width: auto;
    margin: 0 5px;
    float: right;
}

.wrapper.crea-evento div.input-group div.input-section input {
    width: 50%;
    float: right;
}

.wrapper.crea-evento div.input-group div.input-section input.input-sm {
    width: 65px;
}

问题出现了，只有在 Safari 上，当我点击这些(小时)的第一个输入时，它会自动聚焦第二个(分钟)。在小时输入字段上书写的唯一方法是使用键盘上的 TAB 键，这显然不是最佳解决方案。

在 Chrome、Firefox 和 IE(9+，Edge 也是)上工作正常，只有 Safari 有这种行为。会不会是 webkit 错误？我读过 Safari 的这种“自动对焦”，但仅限于移动设备，而不是桌面

Answer 1

您的 HTML 无效； label 元素最多只能包含一个表单元素。鉴于 HTML 无效，每个浏览器都试图以某种方式将焦点提供给 input 元素之一，Chrome、Firefox 和 Internet Explorer/Edge 最终将焦点提供给同一个元素， 第一个。 Safari 为最后一个 input 或连续的每个 input 提供焦点。

因此，“解决方案”是重写您的 HTML，以便每个 label 仅与一个 input 关联。