Comment soumettre un formulaire lorsque la touche retour est enfoncée?

Quelqu'un peut-il me dire comment soumettre un formulaire HTML lorsque la touche de retour est enfoncée et s'il n'y a pas de boutons dans le formulaire? Le bouton d'envoi n'est pas là . J'utilise un div personnalisé au lieu de cela.

OMI, c'est la réponse la plus claire:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

Mieux encore, si vous utilisez javascript pour soumettre le formulaire en utilisant le div personnalisé, vous devez également utiliser javascript pour le créer, et pour définir le style d'affichage: aucun sur le bouton. De cette façon, les utilisateurs avec javascript désactivé verront toujours le bouton d'envoi et pourront cliquer dessus.

Il a été noté que display: none amènera IE à ignorer l'entrée. J'ai créé un nouvel exemple JSFiddle qui commence comme un formulaire standard et utilise l'amélioration progressive pour masquer l'envoi et créer le nouveau div. J'ai utilisé le style CSS de StriplingWarrior .

Pour soumettre le formulaire lorsque vous appuyez sur la touche Entrée, créez une fonction javascript le long de ces lignes.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

Ensuite, ajoutez l'événement à la portée dont vous avez besoin, par exemple sur la balise div:

<div onKeyPress="return checkSubmit(event)"/>

C'est aussi le comportement par défaut d'Internet Explorer 7 de toute façon (probablement aussi les versions antérieures).

J'ai essayé diverses stratégies basées sur javascript / jQuery, mais j'ai continué à avoir des problèmes. Le dernier problème survenu concernait une soumission accidentelle lorsque l'utilisateur utilise la touche Entrée pour sélectionner dans la liste de saisie semi-automatique intégrée du navigateur. Je suis finalement passé à cette stratégie, qui semble fonctionner sur tous les navigateurs pris en charge par mon entreprise:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Ceci est similaire à la réponse actuellement acceptée par Chris Marasti-Georg, mais en évitant display: none, cela semble fonctionner correctement sur tous les navigateurs.

Mise à jour

J'ai modifié le code ci-dessus pour inclure un négatif tabindexafin qu'il ne capture pas la touche de tabulation. Bien que cela ne soit techniquement pas validé en HTML 4, la spécification HTML5 inclut un langage pour le faire fonctionner comme la plupart des navigateurs l'implémentaient déjà de toute façon.

Utilisez la <button>balise. De la norme W3C:

Les boutons créés avec l'élément BUTTON fonctionnent comme les boutons créés avec l'élément INPUT, mais ils offrent des possibilités de rendu plus riches: l'élément BUTTON peut avoir du contenu. Par exemple, un élément BUTTON qui contient une image fonctionne comme et peut ressembler à un élément INPUT dont le type est défini sur "image", mais le type d'élément BUTTON autorise le contenu.

Fondamentalement, il existe une autre balise, <button>qui ne nécessite aucun javascript , qui peut également soumettre un formulaire. Il peut être stylisé à la manière d'une <div>balise (y compris <img />à l'intérieur de la balise bouton). Les boutons de la <input />balise ne sont pas aussi flexibles.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Il existe trois types à définir sur le <button>; ils correspondent aux <input>types de boutons.

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Normes

• W3C wiki à propos <button>
• HTML5 <button>
• HTML4 <button>

J'utilise des <button>tags aveccss-sprites et un peu de cssstyle pour obtenir des boutons de forme colorés et fonctionnels. Notez qu'il est possible d'écrire du CSS pour, par exemple, des <a class="button">liens partagés avec le style avec l' <button>élément.

Je crois que c'est ce que tu veux.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

Chaque fois qu'une touche est enfoncée, la fonction enter () est appelée. Si la touche enfoncée correspond à la touche Entrée (13), alors sendform () sera appelé et le premier formulaire rencontré sera envoyé. Ceci est uniquement pour Firefox et les autres navigateurs conformes aux normes.

Si vous trouvez ce code utile, assurez-vous de voter pour moi!

Voici comment je le fais avec jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Les autres javascript ne seraient pas trop différents. le catch vérifie l'argument keypress de "13", qui est la touche d'entrée

Utilisez le script suivant.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

Pour chaque champ qui doit soumettre le formulaire lorsque l'utilisateur clique sur Entrée, appelez la fonction submitenter comme suit.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

J'utilise cette méthode:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

En gros, je viens d'ajouter une entrée invisible de type image (où " spacer.gif " est un gif transparent 1x1).

De cette façon, je peux soumettre ce formulaire soit avec le bouton «envoyer» ou simplement en appuyant sur Entrée sur le clavier.

C'est le truc!

Pourquoi n'appliquez-vous pas simplement les styles d'envoi div à un bouton d'envoi? Je suis sûr qu'il existe un javascript pour cela, mais ce serait plus facile.

Si vous utilisez asp.net, vous pouvez utiliser l' attribut defaultButton sur le formulaire.

Je pense que vous devriez en fait avoir un bouton d'envoi ou une image d'envoi ... Avez-vous une raison spécifique d'utiliser un "soumettre div"? Si vous voulez juste des styles personnalisés, je recommande <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

En étendant les réponses, c'est ce qui a fonctionné pour moi, peut-être que quelqu'un le trouvera utile.

HTML

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Similaire à l'exemple de Chris Marasti-Georg, utilisant à la place du javascript en ligne. Ajoutez essentiellement onkeypress aux champs avec lesquels la touche Entrée doit fonctionner. Cet exemple agit sur le champ du mot de passe.

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Étant donné que les display: noneboutons et les entrées ne fonctionnent pas dans Safari et IE, j'ai trouvé que le moyen le plus simple, ne nécessitant aucun piratage javascript supplémentaire , consiste simplement à ajouter un élément absolument positionné <button />au formulaire et à le placer loin de l'écran.

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

Cela fonctionne dans la version actuelle de tous les principaux navigateurs à partir de septembre 2016.

De toute évidence, il est recommandé (et plus sémantiquement correct) de simplement le style <button/>comme vous le souhaitez.

L'utilisation de l'attribut "autofocus" permet de donner le focus d'entrée au bouton par défaut. En fait, cliquer sur n'importe quel contrôle dans le formulaire donne également le focus au formulaire, une condition pour que le formulaire réagisse au RETOUR. Ainsi, "l'autofocus" le fait pour vous au cas où l'utilisateur n'aurait jamais cliqué sur aucun autre contrôle dans le formulaire.

Ainsi, "l'autofocus" fait la différence cruciale si l'utilisateur n'a jamais cliqué sur aucun des contrôles de formulaire avant d'appuyer sur RETURN.

Mais même dans ce cas, il y a encore 2 conditions à remplir pour que cela fonctionne sans JS:

a) vous devez spécifier une page vers laquelle aller (si elle est vide, elle ne fonctionnera pas). Dans mon exemple, c'est hello.php

b) le contrôle doit être visible. Vous pouvez éventuellement le déplacer hors de la page pour le masquer, mais vous ne pouvez pas utiliser display: none ou visibilité: hidden. Ce que j'ai fait, c'était d'utiliser le style en ligne pour simplement le déplacer de la page vers la gauche de 200 pixels. J'ai fait la hauteur 0px pour qu'elle ne prenne pas de place. Parce que sinon, il peut encore perturber les autres contrôles ci-dessus et ci-dessous. Ou vous pouvez aussi faire flotter l'élément.

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>