javascript - 重复值 VS document.querySelector

Question

在同一页面上，我使用 Play 重复值和 document.querySelector。

举一个最简单的例子:

@helper.form(action = routes.MyController.myAction()) {
  <input type="search" id="input[0]" />
  <input type="search" id="input[1]" />
  <input type="search" id="input[2]" />
}

<script language="JavaScript">
  var input = document.querySelector('#input[1]');
  something(input);
</script>

问题是 Play 使用该格式 input[i] 来映射重复字段，但 JavaScript 引擎不接受它:

SyntaxError: An invalid or illegal string was specified

一侧或另一侧是否有简单的解决方法？

Answer 1

在 CSS 选择器中，方括号用于选择属性。如果你想从字面上匹配它，你必须转义它们。

var input = document.querySelector('#input\\[1\\]');

您还可以使用 getElementById，它不会解析 ID。

var input = document.getElementById('input[1]');