我在一个表单上遇到了一个小问题,它有两个输入字段,表示时间(格式 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 的这种“自动对焦”,但仅限于移动设备,而不是桌面
最佳答案
您的 HTML 无效; label
元素最多只能包含一个表单元素。鉴于 HTML 无效,每个浏览器都试图以某种方式将焦点提供给 input
元素之一,Chrome、Firefox 和 Internet Explorer/Edge 最终将焦点提供给同一个元素, 第一个。 Safari 为最后一个 input
或连续的每个 input
提供焦点。
因此,“解决方案”是重写您的 HTML,以便每个 label
仅与一个 input
关联。
关于html - MAC 上的 Safari 跳过输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38790229/