将焦点放在已部分渲染的元素上

Question

我有一个带有 input 元素的表单，它在 blur 事件上更新包含表单元素的面板。我希望用户能够使用tab 键进行导航。因此，使用tab 保留第一个输入应该将焦点放在呈现表单的第一个表单元素上。

带有blur事件的输入元素：

<h:inputText class="text" id="profileLocation" value="#{cc.attrs.managedBean.profileLocation}">
    <f:validateRegex pattern="([A-Z]{2}[A-Z0-9])(?:\.(\d+))?(\.\d+)?(\.\d+)?" />
    <f:ajax event="blur" render="assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}"/>
</h:inputText>

它会将assertionLocationPanel定义为：

<p:outputPanel id="assertionLocationPanel">
    <h:inputText value="#{cc.attrs.managedBean.property}">
    </h:inputText>
</p:outputPanel>

使用tab 键时，面板会更新，但焦点不在输入元素上。我想这是因为渲染。如果面板未更新，则将焦点设置到正确的元素。

解决方案

调用onevent属性中指定的javascript函数：

<f:ajax event="blur" render="profileLocationErrorMessage assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}" onevent="setFocus"/>

将JS函数定义为：

<script type="text/javascript">  
    function setFocus() {
        $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();
    }  
</script>  

我不得不调用 JS 函数 setFocus 而不是在 onevent 属性中调用 $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();，因为它不起作用。我保留了生成的 id，因为我使用复合，我也将 javax.faces.SEPARATOR_CHAR 重新定义为 -。

如果您使用常规的: 分隔符，则必须将分隔符转义为#ConditionalComposite\\:ConditionalForm1\\:ProfileLocation\\:segmentInstanceNumber。

Answer 1

你试过了吗？

首先在outpupanel下给inputText一个id。

<p:outputPanel id="assertionLocationPanel">
<h:inputText value="#{cc.attrs.managedBean.property}" id="assertioninput">
</h:inputText>

然后像这样添加 ajax 完成事件，并在你想要的输入上完成焦点。

<a4j:ajax event="complete"  render="assertionLocationPanel" oncomplete="assertioninput.focus();"/>

顺便别忘了设置form prependid=false，以便直接调用inputtext的id