SelectBooleanCheckbox在没有鼠标悬停的情况下获得焦点

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标签来解决它，但不幸的是它不能用selectBooleanCheckbox工作。

过去是否有人有同样的问题，并知道解决方案？

Answer 1

这是因为所有东西都包装在h：outputLabel标签中。此outputLable呈现为一个纯标签html元素。

你可以看到形成W3C specification，标签内的任何事情都会切换控制

元素不呈现为任何特殊的用户。然而，它提供了易用性改进鼠标的用户，因为如果用户点击该元素中的文本，按下该键则控制

要解决这个问题，就需要更换H：用啊输出标签标签： panelGroup中布局= “块”，它呈现一个<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>