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

Question

我有一个带有输入元素的表单，它更新了一个包含 blur 上的表单元素的面板事件。我希望用户能够使用 tab 进行导航 key 。因此，使用 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而不是调用 $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();在 onevent属性，因为它不起作用。我保留了生成的 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 完成事件并 oncomplete 关注您想要的输入。

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

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