Tengo una jsf 1.2 formulario con dos botones y varios campos de entrada. El primer botón descarta los valores introducidos y vuelve a llenar la página con los valores de una db, el segundo botón guarda los valores introducidos. El problema se produce cuando el usuario pulsa enter mientras el cursor está en uno de los campos de entrada de datos, el formulario se envía y la acción asociada con el primer botón se ejecuta.

El código se parece a esto:

<h:commandButton action="#{bean.reset}" value="Reset" />
<h:commandButton action="#{bean.save}" value="Save" />

<!-- h:datatable with several h:inputText elements -->

Es posible declarar un botón específico como la acción por defecto al pulsar enter? Es este comportamiento se especifica en algún lugar?

Trinidad ofrece una funcionalidad dentro de la etiqueta form. enlace
Hola Jörn, me gustaría deshabilitar autosubmit para formularios con un solo campo de entrada. Supongo que usted no desea que el formulario sea enviado por pulsando la tecla intro en el campo. – es cierto: los veo en JAX este año?
Thomas: ¿hay una manera fácil de desactivar presentar en la entrada (tal vez sin javascript como en BalusCs respuesta)? Y sí, voy a estar en Jax en Maguncia.
Primefaces es también voy a incluir un DefaultCommand componente, acaba de anunciar en el primefaces blog (blog.primefaces.org/?p=1787).

OriginalEl autor Jörn Horstmann | 2011-03-30

6 Comentarios

  1. 104

    Esto no es específico para JSF. Esto es específico de HTML. El Los formularios de HTML5 sección de especificación de 4.10.22.2 básicamente especifica que la primera que ocurren <input type="submit"> elemento en el árbol «orden» en el mismo <form> como la entrada de corriente del elemento en el DOM de HTML árbol se invoca en enter.

    Básicamente, hay dos soluciones:

    • Uso de JavaScript para capturar la tecla enter pulse e invocar el botón deseado.

      <h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:saveid').click(); return false; }">

      Si usted tiene textareas en el formulario, te gustaría poner el JS en todos los no-textarea elementos de entrada en lugar de en el formulario. Véase también Impedir que los usuarios envíen un formulario al pulsar la tecla Intro.


    • Intercambiar los botones en HTML y CSS carrozas para el intercambio de espalda.

      <div style="width: 100px; clear: both;">
          <h:commandButton action="#{bean.save}" value="Save" style="float: right;" />
          <h:commandButton action="#{bean.reset}" value="Reset" style="float: left;" />
      </div>

      Es posible que sólo requieren de algunos de píxeles precisos. Por supuesto, poner CSS en su propio .css archivo, usando style es una mala práctica, el ejemplo anterior es por razones de brevedad.


    Si quieres pasar a utilizar PrimeFaces, ya 3.2 usted puede utilizar <p:defaultCommand> de forma declarativa identificar el botón que debe ser invocado cuando se pulsa la tecla enter en el formulario.

    <h:form>
        <p:defaultCommand target="save" />
        ...
        <h:commandButton id="reset" action="#{bean.reset}" value="Reset" />
        <h:commandButton id="save" action="#{bean.save}" value="Save" />
    </h:form>

    Es bajo la cubre el uso de JavaScript para que el que concede un keydown escucha a los padres <h:form> que a su vez verifica si se presiona la tecla entrar en un no-textarea/botón/enlace elemento y, a continuación, invoca click() en el elemento de destino. Básicamente el mismo como en la 1ª solución mencionada en esta respuesta.

    Gracias, he modificado el código javascript un poco para ejecutar solo en los campos de entrada de texto, de lo contrario, presione entrar mientras cualquier botón tiene el foco también ejecutar la acción de guardar. La modificación de controlador se parece a esto: if (event.keyCode == 13 && event.target.nodeName == 'INPUT' && event.target.getAttribute('type') == 'text') { document.getElementById('form:saveButton').click(); return false; }
    Tomo nota de que defaultCommand se ejecuta en keydown – ¿hay una manera de cambiar a keyup? Estamos teniendo un problema en nuestro formulario que se presenta muchas veces si la tecla enter se mantiene presionada a veces – no siempre.

    OriginalEl autor BalusC

  2. 9

    He encontrado una forma que es menos chapucero y funciona bien. La idea es la de un oculto commandButton.

    Lamentablemente display:none estilo no puede ser utilizado porque entonces la commandButton será ignorado. visibility:hidden no es bueno porque mantiene el componente del espacio reservado.

    Pero podemos afinar el estilo así que el tamaño de su aspecto visual será cero con el siguiente CSS:

    .zeroSize {
        visibility: hidden;
        padding: 0px;
        margin: 0px;
        border: 0px;
        width: 0px;
        height: 0px;
    }

    Y ahora todo lo que se necesita es:

    <h:commandButton value="" action="#{bean.save}" class="zeroSize" />

    Esto se traducirá en un botón de comando invisible que, de acuerdo a la primera-siguiente-enviar-regla del botón puede ser activado.

    No tomar este enfoque cuando se utiliza el botón ficha?
    No, no, porque no es visible (visibility:hidden;).
    Esta solución de la OMI es mejor que el aprobado, ya que se resuelve el precisamente el problema era la pregunta acerca de con menos esfuerzo.

    OriginalEl autor icza

  3. 4

    Para ocultar elementos puede utilizar css: style="visibility: hidden"

    Para cambiar la acción predeterminada si el uso de primefaces, se puede utilizar: <p:defaultCommand target="yourButtonDefault" />
    Por ejemplo:

    <h:form id="form">
    
        <h:panelGrid columns="3" cellpadding="5">
            <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>
            <p:inputText id="name" value="#{defaultCommandBean.text}" />
            <h:outputText value="#{defaultCommandBean.text}" id="display" />
        </h:panelGrid>
    
        <p:commandButton value="Button1" id="btn1" actionListener="#{defaultCommandBean.btn1Submit}" ajax="false"/>
        <p:commandButton value="Button2" id="btn2" actionListener="#{defaultCommandBean.btn2Submit}" />
        <h:commandButton value="Button3" id="btn3" actionListener="#{defaultCommandBean.btn3Submit}" />
    
        <p:defaultCommand target="btn3" />
    
    </h:form>

    Fuente: Primefaces nuevo componente: DefaultCommand

    Usar en combinación con el <p:focus> y el rock!
    Tenga en cuenta que en caso de que quieras evitar formas de ser presentado, asegúrese de quitar todos los p:defaultCommand ocurrencias.
    Tomo nota de que defaultCommand se ejecuta en keydown – ¿hay una manera de cambiar a keyup? Estamos teniendo un problema en nuestro formulario que se presenta muchas veces si la tecla enter se mantiene presionada a veces – no siempre.

    OriginalEl autor Cristian Arteaga

  4. 3

    Siguientes BalusC la recomendación de resolver el problema utilizando JavaScript, escribí algunas código jQuery para hacer el trabajo:

    $(function(){
      $('form').on('keypress', function(event){
        if(event.which === 13 && $(event.target).is(':input')){
            event.preventDefault();
            $('#save').trigger('click');
        }
      });
    });

    CodePen: http://codepen.io/timbuethe/pen/AoKJj

    OriginalEl autor Tim Büthe

  5. 3

    Ignorar la tecla ENTRAR sólo en los campos de entrada de texto (fuente):

    <script type="text/javascript"> 
    
      function stopRKey(evt) { 
         var evt = (evt) ? evt : ((event) ? event : null); 
         var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
         if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
      } 
    
      document.onkeypress = stopRKey; 
    
    </script>

    OriginalEl autor Sergey Chepurnov

  6. 0

    Puede utilizar un h:commandLink para el primer botón y el estilo con css como el h:commandButton.

    Por Ejemplo, se levanta "btn btn-default" el mismo aspecto en commandLink y control commandButton.

    OriginalEl autor Stefan

Dejar respuesta

Please enter your comment!
Please enter your name here