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 中看到标签内的任何内容都会切换控件

The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control

要解决此问题，您需要使用呈现 <div>:

的 h:panelGroup 布局="block" 替换 h:output 标签

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

SelectBooleanCheckbox 在没有鼠标悬停的情况下接收焦点

SelectBooleanCheckbox receives focus without mouseover

jsf

selectbooleancheckbox