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：outputラベルタグをah： <div>をレンダリングpanelGroupレイアウト= "ブロック"：関連

<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>