jsf example - Action par défaut à exécuter en appuyant sur Entrée dans un formulaire




primefaces framework (6)

J'ai un formulaire jsf 1.2 avec deux boutons et plusieurs champs de saisie. Le premier bouton supprime les valeurs saisies et repeuple la page avec les valeurs d'un db, le deuxième bouton enregistre les valeurs saisies. Le problème se produit lorsque l'utilisateur appuie sur Entrée alors que le curseur se trouve dans l'un des champs de saisie, que le formulaire est soumis et que l'action associée au premier bouton est exécutée.

Le code ressemble à ceci:

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

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

Est-il possible de déclarer un bouton spécifique comme action par défaut en appuyant sur Entrée? Ce comportement est-il spécifié quelque part?


Answers

Pour masquer les éléments, vous pouvez utiliser css: style="visibility: hidden"

Pour modifier l'action par défaut si vous utilisez des primitives, vous pouvez utiliser: <p:defaultCommand target="yourButtonDefault" /> Par exemple:

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

Source: blog.primefaces.org/?p=1787


Suite à la recommandation de BalusC de résoudre le problème en utilisant JavaScript, j'ai écrit du code jQuery pour faire le travail:

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


Vous pouvez utiliser un h:commandLink pour le premier bouton et le h:commandLink avec css comme le h:commandButton .

Par exemple, les bootstraps "btn btn-default" ressemblent sur commandLink et commandButton.


Ce n'est pas spécifique à JSF. Ceci est spécifique au HTML. La section de spécification de formulaires HTML5 4.10.22.2 spécifie fondamentalement que le premier élément <input type="submit"> dans "l'arbre" dans le même <form> que l'élément d'entrée courant dans l'arborescence DOM HTML sera invoqué lors de la frappe. .

Il existe essentiellement deux solutions de contournement:

  • Utilisez JavaScript pour capturer la touche Entrée et appuyez sur le bouton souhaité.

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

    Si vous avez des zones de texte dans le formulaire, vous souhaitez placer le JS sur tous les éléments d'entrée non-textarea plutôt que sur le formulaire. Voir aussi Empêcher les utilisateurs de soumettre un formulaire en appuyant sur Entrée .

  • Échangez les boutons en HTML et utilisez les flottants CSS pour les échanger.

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

    Cela peut seulement nécessiter quelques ajustements de pixels. Bien sûr, mettez CSS dans son propre fichier .css ; l'utilisation du style est une mauvaise pratique, l'exemple ci-dessus est pour la brièveté.

Si vous utilisez PrimeFaces, depuis la version 3.2, vous pouvez utiliser <p:defaultCommand> pour identifier de manière déclarative le bouton qui doit être appelé lorsque vous appuyez sur la touche Entrée dans le formulaire.

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

C'est sous les couvertures en utilisant JavaScript pour ce qui attache un écouteur de keydown au parent <h:form> qui vérifie à son tour si la touche entrée est enfoncée dans un élément non-textarea / button / link, puis invoque click() sur le élément cible. Fondamentalement la même chose que la première solution de contournement mentionnée dans cette réponse.


Ignorez la touche ENTRÉE uniquement dans les champs de saisie de texte ( source ):

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

Vous pouvez utiliser une méthode telle que

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

En lisant les commentaires sur le post original, pour le rendre plus utilisable et permettre aux gens d'appuyer sur Entrée s'ils ont rempli tous les champs:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});






jsf action default form-submit enter