Primefaces Press Enter 执行commandButton

Posted 2023-02-19

【中文标题】Primefaces Press Enter 执行commandButton

【英文标题】：Primefaces Press Enter executes commandButton

【发布时间】：2015-01-31 19:18:27

【问题描述】：

我正在使用 primefaces 并且遇到以下问题，我有一个工具栏，其中包含多个按钮和组件，例如 inputtext 和表单中的其他组件，但是当我在某些组件中按 Enter 键时工具栏的第一个按钮被调用，在这种情况下，命令按钮“idButtomNuevo”被调用，因为它位于第一个位置。

我的代码：

almacen.xhtml

<ui:composition  
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui" >

 <h:form id="idFormAlmacen" >
    <p:focus context="idFormAlmacen"/>
    <p:growl id="growl" showDetail="true" life="2500" for="keyAlmacen" globalOnly="true"/>
    <p:panel header="Almacen" styleClass="texto-panel"/>
    <ui:include src="/pages/logistica/almacen/toolbar_almacen.xhtml"/>
    <ui:include src="#almacenBean.pathbodyAlmacen" />    
 </h:form>
 <ui:include src="/pages/logistica/almacen/dialogos_almacen.xhtml" />
</ui:composition> 

toolbar_almacen.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui">
    <p:toolbar>  
        <p:toolbarGroup align="left" styleClass="panelgrid-css">
            <p:commandButton id="idButtomNuevo" title="Nuevo"  icon="ui-icon-document" process="@this" value="Nuevo"
                    actionListener="#almacenBean.limpiarAlmacen" update="idFormAlmacen" immediate="true">
                 <p:resetInput target="idFormAlmacen"/>
            </p:commandButton>
            <p:commandButton id="idButtomGuardar" title="Guardar" icon="ui-icon-disk" action="#almacenBean.guardarAlmacen" 
                 disabled="#almacenBean.au.btGuardarDisabled" update=":idFormAlmacen" validateClient="true" value="Guardar"/>
            <p:commandButton id="idButtomEliminar" title="Eliminar" icon="ui-icon-trash" actionListener="#almacenBean.eliminarAlmacen"
                 disabled="#almacenBean.au.btGuardarDisabled" update="idFormAlmacen" process="@this" immediate="true"
                 value="Eliminar"/>
            <p:commandButton id="idButtomListar" title="Listar" icon="ui-icon-grip-solid-horizontal" process="@this" value="Listar"
                             actionListener="#almacenBean.listarAlmacen" update="idFormAlmacen" immediate="true"/>
            <p:commandButton id="idButtomBuscar" title="Buscar" icon="ui-icon-search" value="Buscar"
                             actionListener="#almacenBean.buscarAlmacen" immediate="true">
                <p:ajax event="dialogReturn" update="idFormAlmacen"/>
            </p:commandButton>
        </p:toolbarGroup>  
    </p:toolbar>
 </ui:composition>

pathbodyAlmacen = "/pages/logistica/almacen/crear_almacen.xhtml"

<ui:composition  
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui" >

  <p:panel header="Datos Generales de Almacen" />  
  <h:panelGrid id="idPanelAlmacen1" columns="3"  border="0" columnClasses="colC1-T,colC2-T">
    <p:outputLabel  for="idEmpresa" value="Empresa:" style="margin-right:2px;"/>  
    <p:inputText id="idEmpresa"  style="width:350px;" value="#almacenBean.alVista.strEmpresa" readonly="true"/>  
    <h:outputText value="&#160;&#160;&#160;"/>

    <p:outputLabel for="idCodProveedor" value="Codigo:" style="margin-right:2px;"/>  
    <p:inputText id="idCodProveedor" value="#almacenBean.alVista.codigo" style="width:350px;" required="true"
                 requiredMessage="Ingrese Codigo ">
        <p:clientValidator />
    </p:inputText>  
    <p:message for="idCodProveedor" display="text"/>

    <p:outputLabel for="idNombre" value="Nombre:" style="margin-right:2px;"/>  
    <p:inputText id="idNombre" value="#almacenBean.alVista.nombre" style="width:350px;"
                 required="true" requiredMessage="Ingrese Nombre de Almacen">
        <p:clientValidator event="keyup" />
    </p:inputText>
    <p:message for="idNombre" display="text"/>
  </h:panelGrid>

  <h:panelGrid id="idPgDirAlmacen" columns="4"  border="0" columnClasses="colC1-T,colC2-T,colC3">
    <p:outputLabel for="idInDirAlmacen" value="Direccion de Almacen:" style="margin-right:2px;" />
    <p:inputText id="idInDirAlmacen" style="width:350px;" readonly="true" required="true"  value="#almacenBean.alVista.direccionAlmacen"
                 requiredMessage="Ingrese direccion de Almacen"/>   
    <p:commandButton title="Crear Direccion Almacen" actionListener="#almacenBean.abrirDireccionAlmacen"  process="@this"
                     icon="ui-icon-search" >
        <p:ajax event="dialogReturn" update=":idFormAlmacen:idPgDirAlmacen"/>
    </p:commandButton>
    <p:message for="idInDirAlmacen" display="text"/>
  </h:panelGrid>
</ui:composition> 

谢谢大家

【参考方案1】：

这不是 JSF 特定的行为，当按下 Enter 时，将使用第一个 <input> 和 type="submit"。这已在 SO 上讨论过（请参阅 this 或 this），我将把这些线程的一些建议放在这里。

javascript 解决方案：

在您的表单上使用<h:form id="thisform" onkeypress="if( event.keyCode == 13)event.keyCode=0;">。但是，这将阻止您在表单上使用任何默认命令，因为它会捕获按 Enter。

Primefaces 解决方案：

在表单上使用一个不执行任何操作的虚拟按钮，并将其设置为表单的默认命令。

<p:defaultCommand target="dummy"/>
<p:commandButton id="dummy" process="@none" global="false" style="display:none;"/>

【讨论】：

但是，如果焦点在一个按钮中并且我在两种情况下都按下回车键，则不会调用具有焦点的按钮的操作。请原谅我的英语

第一个例子试试这个：onkeypress="if( event.keyCode == 13)if(document.activeElement.type == 'text') event.keyCode=0;"

谢谢，但我尝试使用：onkeypress="if( event.keyCode == 13)if(document.activeElement.type == 'text') return false;" 并且它正在工作，event.keyCode=0 不起作用

【参考方案2】：

我在我的项目中遇到了同样的问题。为了避免在输入键时提交，我只是做了如下操作。 在每个 inputText 字段添加此代码，

onkeypress="if (event.keyCode == 13)  return false; "

【讨论】：

为什么在每个 inputText 上都可以在表单上执行（就像在其他 anser 中一样）。想补充一下为什么要以更复杂的方式进行操作？