在迭代器中设置inputText的id

Question

我的目标是将焦点设置为特定的inputText。

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

对于document.getElementById，我需要渲染的html <input>的id。我尝试将此id设置为正确的索引。但是，它是用id varFieldIterator:0:varField呈现的，其中数字0来自迭代器，并且根据我的起始值selectionStart而有所不同。如果我以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 <c:forEach>，它就会起作用。但这个标签可能有不可取的副作用。

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

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

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

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

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

或者你可以给它们一个像<tr:inputText styleClass="specificInput">这样的类名，然后用类名获取它们

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

这些调用是可链接的。因此，如果你知道它在<h:form id="myForm">内部，那么你也可以做例如：

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