Jsf SelectBooleanCheckbox在不使用鼠标的情况下接收焦点

Jsf SelectBooleanCheckbox在不使用鼠标的情况下接收焦点,jsf,selectbooleancheckbox,Jsf,Selectbooleancheckbox,我对jsf组件有一个奇怪的问题(h:inputFile&h:selectBooleanCheckbox) 这两个组件都接收焦点,即使我的鼠标位于页面的其他位置。代码如下: <h:form id="logoUpload" enctype="multipart/form-data"> <div> <h:outputLabel rendered="true"> <h:inputFile id="companyLogo" lab

我对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不起作用


过去是否有人遇到过同样的问题并知道解决方案?

这是因为所有东西都包装在h:outputLabel标签中。此可输出文件呈现为纯标签html元素

您可以从表单中看到,标签内的任何内容都将切换控件

元素不会呈现为用户的任何特殊元素。但是,它为鼠标用户提供了可用性改进,因为如果用户单击元素中的文本,它将切换控件

要解决此问题,您需要使用h:panelGroup layout=“block”替换h:output标签标签,该标签呈现




这是因为所有内容都包装在h:outputLabel标记中。此可输出文件呈现为纯标签html元素

您可以从表单中看到,标签内的任何内容都将切换控件

元素不会呈现为用户的任何特殊元素。但是,它为鼠标用户提供了可用性改进,因为如果用户单击元素中的文本,它将切换控件

要解决此问题,您需要使用h:panelGroup layout=“block”替换h:output标签标签,该标签呈现




Related:您很可能阅读了不好的JSF教程。Related:您很可能阅读了不好的JSF教程。与panelGroup Balus合作的好建议。这完全消除了html表格的额外标记。非常感谢您对Balus小组提出的好建议。这完全消除了html表格的额外标记。非常感谢你
<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>