我有一个带有输入元素的表单,它更新了一个包含 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
.
最佳答案
你试过这个吗?
首先在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
关于jsf - 将焦点放在已部分渲染的元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7014344/