在迭代器中设置 inputText 的 id

Question

我的目标是将焦点设置到特定的输入文本。

由于似乎无法使用 tr:inputText 属性自动执行此操作，因此我尝试使用 Javascript。

对于 document.getElementById 我需要渲染的 html 的 id。我尝试将此 id 设置为正确的索引。然而，它是用 id varFieldIterator:0:varField 渲染的，其中数字 0 来自迭代器，并且根据我的起始值选择开始而有所不同。如果我从 SelectionStart = 10 开始，则文本框 10 的第一个索引是 0。如果我从 15 开始，然后使用 PPR 显示前 15 个文本框，它们将获得以 16 开头的 id。

我认为代码会清楚地表明我试图实现的目标：

<tr:iterator
    id="varFieldIterator"
    value="#{myController.form.model.fieldList}"
    var="field"
    rows="15"
    first="#{{myController.form.model.selectionStart}"
    varStatus="status">
  <tr:inputText
      id="varField#{status.index}"
      value="#{field.value}"
      label="Text #{status.index +1}">
</tr:iterator>

<tr:inputHidden
    id="FOCUS_TEXT"
    value="#{myController.form.model.endFocus}"></tr:inputHidden>
<trh:script>
window.onload = function() { document.getElementById('varField' + document.getElementById('FOCUS_TEXT').value).focus(); } 
</trh:script>

Answer 1

虽然 ID 属性接受 EL 表达式，但它仅在视图构建期间设置，而不是在视图渲染期间设置。因此，如果您使用视图构建时间标记（例如 JSTL ），它就会起作用。但此标签可能会产生不良副作用。

我建议只更改您的 JavaScript 函数，以便它不再依赖于 ID。目前尚不清楚您的整个 HTML dom 结构是什么，以及您是否使用 jQuery 或不使用这会简化 HTML DOM 遍历。

使用纯 JS，您可以例如抓取第一个表单，然后抓取它的第一个输入元素：

document.forms[0].elements[0].focus();

或者您可以通过标签名称获取输入元素：

document.getElementsByTagName("input")[0].focus();

或者您可以给它们全部指定一个类名，例如 和 通过类名获取它们：

document.getElementsByClassName("specificInput")[0].focus();

这些调用是可链接的。因此，如果您知道它位于 内，那么您也可以这样做：

document.getElementById("myForm").getElementsByTagName("input")[0].focus();