SelectBoolean复选框接收焦点而无需鼠标悬停

Question

我对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标记来解决它，但不幸的是，它不适用于selectBoolean复选框。

有人过去也遇到过同样的问题，并且知道解决方案吗？

Answer 1

这是因为所有内容都封装在h:outputLabel标记中。该outputTable被呈现为一个纯标签html元素。

你可以从W3C规范中看到，标签内的任何东西都会切换控制

该元素不会呈现为用户的任何特殊元素。然而，它为鼠标用户提供了可用性改进，因为如果用户单击元素中的文本，它会切换控件

要解决此问题，您需要使用h:panelGroup layout="block"来替换h:output标签标签，该标签将呈现<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>