Désactiver le Enter pour ne pas soumettre un formulaire HTML

Dans un formulaire HTML contenant un champ texte unique (input text), on sait que le comportement par défaut du fureteur est de soumettre le formulaire automatiquement si l'utilisateur appuie sur la touche "Enter". Et il n'est pas nécessaire d'avoir un bouton Submit pour que ça fonctionne.

C'est un réflexe normal dans les habitudes des utilisateurs car ils complètent leur entrée de données en faisant Enter dans la majorité des cas (suite à une commande dans un shell, recherche Google, etc). Comment contrôler le tout si on veut éviter que l'utilisateur soumette le formulaire de cette façon ?

Une solution possible serait de créer un autre champ texte qu'on cachera par CSS :

<input type="text" id="foo" name="foo" value="" style="display:none;" />

Ce n'est quand même pas ce qu'il y a de mieux. Pour ma part, je privilégerais l'approche par événement jQuery avec la méthode preventDefault().

Pour commencer, on peut imaginer un formulaire HTML très simple :

<form action="/results.php" method="get">
  <input type="text" id="q" name="q" value="" />
  <input type="submit" id="btnSubmit" name="btnSubmit" value="Soumettre" />
</form>

Du côté du JavaScript, on attachera une validation sur l'événement keypress() du champ texte pour détecter quelle touche a été enfoncée. En consultant la table des caractères ASCII, 13 est la valeur décimale du ENTER (carriage return).

$j = jQuery.noConflict();
$j(document).ready( initialize );

function initialize(){
 $j('#q').keypress(
     function(event){
         if(event.keyCode == 13){
             event.preventDefault();
             alert('Un ENTER ne suffit pas.\nCliquez sur le bouton Soumettre.');
         }
     }
 );
}

La fonction anonyme passée en paramètre à keypress() reçoit elle-même en paramètre l'événement qui l'a déclenchée. Une propriété keyCode permet de comparer le code ASCII de la touche et de prévenir le comportement par défaut de l'événement s'il possède la valeur du retour de chariot.