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而不是在$('#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完成事件，并完全关注你想要的输入。

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

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

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

1 个答案: