Question

我遇到了Chrome和Safari之间这种奇怪的行为差异。如果其中有带有输入和按钮的标签，则单击该按钮将使输入在Safari中成为焦点，但在Chrome中则不会。

我发现向按钮单击处理程序添加e.preventDefault()会使Safari的行为与Chrome相同。

这是最小的代码示例：

<label>
  <input />
  <button>add</button>
</label>

这是Chrome / Safari中的错误还是某些记录的“功能”？该html的“正确”方式是什么？

Answer 1

不知道您的按钮为何位于标签内。 Input和button都是可操作的（可以执行一些操作）元素。默认情况下，可操作元素会集中在浏览器中。因此，您应该将两个元素分开。标签可以用输入包装，也可以不用输入包装，有关详细信息，请参见“ Is it better to wrap the label tag around a form item or use the "for" attribute in HTML?”。

<body>

  <label>
  <input />
</label>
  <button>add</button>
</body>

在Safari中单击按钮后，输入字段将获得焦点，但在Chrome中单击

1 个答案: