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>