JSF: action par défaut à exécuter lorsque vous appuyez sur Entrée dans un formulaire

Question

J'ai un jsf 1.2 formulaire avec deux boutons et plusieurs champs de saisie. Le premier bouton annule les valeurs saisies et remplit à nouveau la page avec des valeurs à partir d'une base, le deuxième bouton permet de sauvegarder les valeurs saisies. Le problème se produit lorsque l'utilisateur appuie sur entrée lorsque le curseur est dans l'un des champs de saisie, le formulaire est soumis et l'action associée avec le premier bouton est exécuté.

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 l'action par défaut lorsque vous appuyez sur entrée? Ce comportement est-il spécifié quelque part?

Answer 1

Ce n'est pas spécifique à JSF. Ceci est spécifique au format HTML (et navigateurs internet). En général, la firstnext input type="submit" par rapport à l'actuel input élément sera appelé sur enter appuyez sur. Certains navigateurs internet, permet de changer ce comportement en définissant l' tabindex ordre, mais ce n'est nulle part dans w3 spécifié.

Il y a en gros deux solutions:

• Utiliser JavaScript pour la capture de la touche entrée appuyez sur et invoquer le bouton de votre choix.

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

  Si vous avez ces zones de texte dans le formulaire, vous voulez mettre le JS sur tous les non-textarea éléments d'entrée plutôt que sur la forme.

• Permuter les boutons en HTML et CSS flotteurs pour échanger leur dos.

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

  Alors qu'il pourrait exiger de pixels de l'ajustement, c'est de loin une meilleure solution que JS.

Answer 2

J'ai trouvé un moyen qui est moins hacky et fonctionne bien. L'idée est caché commandButton.

Malheureusement, display:none style ne peut pas être utilisé parce qu'alors, l' commandButton sera ignoré. visibility:hidden n'est pas bon car il maintient le composant de l'espace réservé.

Mais on peut affiner le style de sorte que la taille de son aspect visuel sera de zéro avec le code CSS suivant:

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

Et maintenant, tout ce qu'il faut est:

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

Il en résulte un invisible bouton de commande qui, selon la première de la prochaine bouton "soumettre" règle peut être activé.

Answer 3

Suite à la recommandation de BalusC pour 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