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

Question

我有一个带有输入元素的表单，用于更新包含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键时，面板被更新，但焦点不在输入元素上。我猜这是因为渲染的原因。如果面板没有更新，焦点将被设置为正确的元素。

<<p> 解决方案/strong>

调用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 complete事件和oncomplete焦点在你想要的输入。

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

顺便说一下，不要忘记设置form prependid=false以便直接调用inputtext的id