为什么在 Google Chrome 中看不到非唯一 ID 警告？答案

【问题标题】：Why isn't non-unique id warning visible in Google Chrome?为什么在 Google Chrome 中看不到非唯一 ID 警告？
【发布时间】：2019-09-20 11:39:31
【问题描述】：

在某些页面上我收到了这个 chrome 警告：

[DOM] Found 2 elements with non-unique id #Name: (More info: https://www.chromium.org/developers/design-documents/create-amazing-password-forms) 
<input disabled="disabled" id="Name" name="Name" /> 
<input id="Name" name="Name" type="hidden" />

我正在使用 Chrome：版本 77.0.3865.90（官方构建）（64 位）

我试图通过在 Chrome 中显示下一个代码来重复该问题，但没有警告？

两个相同的 ID 是否足以显示此警告？我错过了什么？

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
</head>
<body>
   <input id="Name" name="Name" />
   <input id="Name" name="Name" /> 
   <input id="password" name="password" type="password">
</body>
</html>

编辑

即使您使用 form 包装输入元素，警告仍然不会显示

【问题讨论】：

标签： html google-chrome

【解决方案1】：

此警告将针对表单字段显示。所以如果你用<form></form> 包裹它 - 你会看到这个警告。

【讨论】：

试过了，没什么区别。

【解决方案2】：

以下是我能够触发警告的最低限度的 HTML：

<input id="foo">
<input id="foo">

显然，只有在至少有一个input 不在任何表单之外时才会触发警告。如果所有的重复输入都包含在表单中，则无法检测到它们。以下不会触发警告：

<form>
    <input id="foo">
    <input id="foo">
</form>
<form>
    <input id="foo">
    <input id="foo">
</form>

但以下是：

<form>
    <input id="foo">
    <input id="foo">
</form>
<input>

这是零意义，所以我认为这是 Chrome 引擎中的一个错误，未来可能会发生变化。

Chrome：版本 86.0.4240.111（官方构建）（64 位）

最后说明：对于本地文件似乎根本没有触发警告。尝试通过您选择的 Web 服务器从有效 URL 加载 HTML。

【讨论】：