我对jsf组件有一个奇怪的问题(h:inputFile& h:selectBooleanCheckbox)。
即使我的鼠标位于页面上的其他位置,两个组件也会获得焦点。这是代码:
<h:form id="logoUpload" enctype="multipart/form-data">
<div>
<h:outputLabel rendered="true">
<h:inputFile id="companyLogo" label="file" value="#{fileHandlerBean.part}" >
<f:validator validatorId="FileUploadValidator" />
</h:inputFile>
</h:outputLabel>
</div>
<div class="clear" />
<h:outputLabel rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" value="#{companyEditController.confirmToU}">
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"
action="#{companyEditController.companyLogoUpload()}"
actionListener="#{fileHandlerBean.uploadCompanyLogo()}"
disabled="#{!companyEditController.confirmToU}"/>
</div>
</h:outputLabel>
</h:form>
如果我将鼠标移到h:outputText上,则复选框会获得焦点。 我对h:inputFile标记有同样的问题。我通过使用h:outputLabel标记包围它来解决它,但不幸的是它没有使用selectBooleanCheckbox。
过去有人遇到同样的问题并且知道解决方案吗?
答案 0 :(得分:3)
这是因为所有内容都包含在h:outputLabel标记中。此outputLable呈现为纯标签html元素。
您可以在W3C specification中看到标签内的任何内容都会切换控件
该元素不会呈现为用户的任何特殊内容。但是,它为鼠标用户提供了可用性改进,因为如果用户单击元素中的文本,它会切换控件
要解决此问题,您需要使用h:panelGroup layout =&#34; block&#34;替换h:output label标签。它呈现<div>
:
<h:panelGroup layout="block" rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" >
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"/>
</div>
</h:panelGroup>