在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错误吗？我已经读过这个＆＃34;自动对焦＆＃34;通过Safari，但只能在移动设备上，而不是在桌面上

Answer 1

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

＆＃34;解决方案＆＃34;因此，要重写您的HTML，以便每个label仅与一个input相关联。

Answer 2

实际上，Safari在这方面与HTML5标准有关： https://www.w3.org/TR/html5/forms.html#the-label-element

  

如果未指定for属性，但label元素具有可变元素后代，则树顺序中的第一个此类后代是标签元素的标记控件。

     

如果标签元素具有除标记控件之外的交互式内容，则标签元素针对那些交互式内容后代及其后代的事件的激活行为必须是什么都不做。

它应该像所有其他浏览器一样。这是一个仍然存在于iOS 11.3中的Safari错误。