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을 형성 볼 수 있습니다. 아 이용하여 출력 라벨 태그 : 사용자가 요소 내의 텍스트를 클릭하면, 그것은

는이 문제를 해결하려면, 당신은 시간을 교체 할 필요가 컨트롤을 전환하기 때문에, 그것은, 마우스 사용자를위한 편의성 향상을 제공합니다 : <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>