Déclencher un clic de bouton avec JavaScript sur la touche Entrée dans une zone de texte

1293

J'ai une entrée de texte et un bouton (voir ci-dessous). Comment puis-je utiliser JavaScript pour déclencher l'événement de clic du bouton lorsque la Entertouche est enfoncée à l'intérieur de la zone de texte?

Il y a déjà un bouton d'envoi différent sur ma page actuelle, donc je ne peux pas simplement faire du bouton un bouton d'envoi. Et, je ne veux que la Enterclé de cliquer sur ce bouton spécifique si elle est pressée à l' intérieur celui - zone de texte, rien d' autre.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
kdenney
la source
1
Remarque importante pour les recrues comme moi: la partie clé de cette question est de savoir si vous avez déjà un formulaire sur la page et que vous avez déjà un bouton d'envoi. La réponse jQuery est compatible avec plusieurs navigateurs et constitue une bonne solution.
Joshua Dance
2
@JoshuaDance, avoir déjà un formulaire / soumettre n'est pas un problème. Une page peut avoir plusieurs formulaires (mais pas imbriqués), chacun ayant sa propre soumission. Chaque champ de chaque formulaire ne déclenchera que la soumission de ce formulaire. Comme indiqué par cette réponse .
Frédéric

Réponses:

1426

Dans jQuery, les éléments suivants fonctionneraient:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Ou en JavaScript simple, les éléments suivants fonctionneraient:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Steve Paulo
la source
12
Il est probablement préférable de rechercher event.which que event.keyCode ou event.charCode, voir developer.mozilla.org/en/DOM/event.charCode#Notes
William Niu
25
keydownce n'est pas keyuple meilleur événement à utiliser. De plus, si vous utilisez asp.net, vous devrez return falseà la fin empêcher asp.net d'intercepter toujours l'événement.
maxp
144
Le problème avec l'utilisation keydownest que le fait de maintenir enfoncée la touche déclenchera l'événement encore et encore. si vous vous attachez à l' keyupévénement, il ne se déclenchera qu'une fois la clé relâchée.
Steve Paulo
26
J'ai modifié votre code event.preventDefault();avant d' ajouter une click();fonction alors que ma page a un formulaire et j'ai changé keyupaveckeypress comme ce fut le gestionnaire ne fonctionne pas pour moi, de toute façon, merci pour pièce propre code!
Adrian K.
7
Pour être honnête, jQuery était à peu près synonyme de JS lorsque cette réponse a été publiée. Mais maintenant, beaucoup d'entre nous qui évitent complètement jQuery (parce que c'est juste un gaspillage de kb lorsque vous utilisez quelque chose comme React) se sentent ennuyés lorsque nous recherchons des réponses aux questions JS et souvent la première chose qui apparaît est une bibliothèque que nous don ne veux pas dépendre.
Andy
402

Il suffit ensuite de le coder!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>
Sergey Ilinsky
la source
5
Oui, j'ai presque fait ça. Je suppose que c'est juste une préférence personnelle ... J'aime l'approche plus modulaire. ;)
kdenney
9
si vous devez arrêter la soumission du formulaire: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). cliquez sur (); event.returnValue = false; event.cancel = true;}"
Gabriel Chung
3
Cela a fonctionné pour moi car la méthode inline, au lieu d'appeler une fonction avec un code similaire, vous permet de retourner false sur l'appel et d'éviter la publication. Dans mon cas, la méthode "click" appelle un appel asynchrone __doPostback et sans le "return false;" rechargerait simplement la page.
Dave
3
Je suis d'accord avec Sam, ce code avec ce code JS en ligne est moche comme l'enfer. Vous devez toujours séparer les codes HTML et JavaScript.
Sk8erPeter
9
@Sam Ne tirez jamais votre sagesse des marionnettes . La douleur mène à la peur , et la peur est le tueur d'esprit. La peur est la petite mort qui entraîne une effacement total. Je vais faire face à ma peur. Je lui permettrai de passer sur moi et à travers moi. Et quand il sera passé, je tournerai l'œil intérieur pour voir son chemin. Là où la peur a disparu, il n'y aura rien. Sauf peut-être des gestionnaires d'événements en ligne. Donc, oui, veuillez séparer vos gestionnaires d'événements de votre vue / balisage, comme le fait cette réponse . ; ^)
ruffin
179

A compris cela:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>
kdenney
la source
22
e = e || window.event; // moyen le plus court pour obtenir l'événement
Victor
2
Meilleure option JavaScript simple. Le JavaScript ajouté en tant qu'attribut en HTML prend beaucoup d'espace et jQuery est juste jQuery (la compatibilité n'est pas garantie). Merci pour la solution!
boxspah
et si vous retournez false à l'intérieur du if, vous pouvez éviter que la clé ne soit traitée davantage: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (event);" /> <input type = "button" id = "btnSearch" Value = "Search" onclick = "doSomething ();" /> <script> fonction searchKeyPress (e) {// recherchez window.event au cas où l'événement ne serait pas passé dans e = e || window.event; if (e.keyCode == 13) {document.getElementById ('btnSearch'). click (); retour faux; } return true; } </script>
Jose Gómez
83

Faites du bouton un élément d'envoi, il sera donc automatique.

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

Notez que vous aurez besoin d'un <form>élément contenant les champs de saisie pour que cela fonctionne (merci Sergey Ilinsky).

Ce n'est pas une bonne pratique de redéfinir le comportement standard, la Enterclé doit toujours appeler le bouton Envoyer sur un formulaire.

albertein
la source
30
Mec! Lisez toute sa question. Il y a déjà un autre bouton d'envoi sur la page, donc cela ne fonctionnerait pas pour lui.
skybondsor
5
Fait amusant, j'ai récemment essayé de le faire dans SharePoint. Cependant, SharePoint a déjà un formulaire qui enveloppe tout votre contenu, et toutes les <form>balises sont jetées par l'analyseur HTML autrement libéral. Je dois donc détourner les touches ou casser. (BTW, appuyer sur Entrée dans SharePoint lance le mode Édition pour une raison quelconque. Je suppose que le ruban utilise le même formulaire.)
1
Un <button type="submit" onclick="return doSomething(this)">Value</button>fonctionne pour. L'indice se trouve dans le returnmot
Gus
77

Comme personne ne l'a addEventListenerencore utilisé , voici ma version. Compte tenu des éléments:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

J'utiliserais ce qui suit:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

Cela vous permet de changer le type d'événement et l'action séparément tout en gardant le HTML propre.

Notez qu'il vaut probablement la peine de s'assurer que cela se trouve en dehors d'un <form>car, lorsque j'ai inclus ces éléments en appuyant sur Entrée, j'ai soumis le formulaire et rechargé la page. M'a pris quelques clins d'œil à découvrir.

Addendum : Grâce à un commentaire de @ruffin, j'ai ajouté le gestionnaire d'événements manquant et un preventDefaultpour permettre à ce code de fonctionner (vraisemblablement) à l'intérieur d'un formulaire également. (Je vais essayer de tester cela, à quel point je supprimerai le contenu entre crochets.)

Eau glacée
la source
14
Je ne comprends vraiment pas pourquoi la réponse JQeuery a plus de votes positifs. Je pleure pour la communauté de développement web.
David
1
Tout ce qui vous manque vraiment, c'est un argument dans votre gestionnaire de touches et un e.preventDefault()pour le faire fonctionner avec les formulaires. Voir ma (nouvelle) réponse .
ruffin
5
à moins que vous n'ayez pas l'intention que vos utilisateurs entrent réellement des données, vous devriez vraiment faire quelque chose commeif (event.keyCode == 13) { event.preventDefault(); go.click();}
non synchronisé
1
Utiliser jQuery juste pour cette petite chose est certainement inutile. Il fonctionne également beaucoup plus facilement avec CSP et prend moins de temps à charger. Si vous le pouvez, utilisez ceci.
Avamander
59

En JavaScript simple,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

J'ai remarqué que la réponse est donnée uniquement dans jQuery, j'ai donc pensé à donner quelque chose en JavaScript également.

Varun
la source
20
document.layers? Soutenez-vous toujours Netscape? !!
Victor
6
Non, vous n'avez pas besoin de prendre en charge Netscape. blog.netscape.com/2007/12/28/…
kingdango
7
netscape.com n'existe même plus (il redirige vers aol.com) et pourtant il y a encore des gens qui supportent nescape, incroyable.
LeartS
6
evt.which ? evt.which : evt.keyCodeest égal àevt.which || evt.keyCode
utilisateur
3
@LeartS Je parierais que c'est parce qu'il y a encore des gens qui utilisent Netscape.
SantiBailors
23

Un truc de base que vous pouvez utiliser pour cela que je n'ai pas vu entièrement mentionné. Si vous souhaitez effectuer une action ajax, ou un autre travail sur Entrée, mais que vous ne souhaitez pas envoyer de formulaire, vous pouvez le faire:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

Paramètre action = "javascript: void (0);" comme ceci est un raccourci pour empêcher essentiellement le comportement par défaut. Dans ce cas, une méthode est appelée si vous appuyez sur Entrée ou cliquez sur le bouton et un appel ajax est effectué pour charger certaines données.

Switters
la source
Il s'agit d'une meilleure solution pour la prise en charge des appareils mobiles. Il masque automatiquement le clavier sur les appareils Android, ainsi que iOS si vous ajoutez searchCriteria.blur();à onsubmit.
Aaron Gillion
Cela ne fonctionnera pas, car il y a déjà un autre bouton d'envoi dans la page.
Jose Gómez
@ JoseGómez, une page peut avoir autant de boutons d'envoi que le développeur le souhaite, étant déclenchée uniquement par les champs correspondants. Il suffit d'avoir des formulaires distincts pour chaque groupe de champs / soumettre. Une page n'est pas limitée à un seul formulaire.
Frédéric
@Frederic: d'après la question, j'ai (mal?) Compris que l'autre bouton de soumission était sous la même forme: "Il y a déjà un bouton d'envoi différent sur ma page actuelle, donc je ne peux pas simplement faire du bouton un bouton d'envoi."
Jose Gómez
1
C'est une excellente réponse car elle autorise des actions personnalisées tout en évitant la nécessité d'un tas de code de remplacement sophistiqué.
Beejor
16

Essayez-le:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>
mahbub_siddique
la source
15

Pour déclencher une recherche à chaque pression sur la touche Entrée, utilisez ceci:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
signifier
la source
14
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

C'est juste quelque chose que j'ai d'un projet quelque peu récent ... Je l'ai trouvé sur le net, et je n'ai aucune idée s'il existe une meilleure façon ou non dans le vieux JavaScript.

Max Schmeling
la source
14

Utilisez keypresset event.key === "Enter"avec JS moderne!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

Documents Mozilla

Navigateurs pris en charge

Gibolt
la source
13

Bien que, je suis à peu près sûr que tant qu'il n'y a qu'un seul champ dans le formulaire et un seul bouton de soumission, appuyer sur Entrée devrait soumettre le formulaire, même s'il y a un autre formulaire sur la page.

Vous pouvez ensuite capturer le formulaire onsubmit avec js et effectuer la validation ou les rappels souhaités.

garrow
la source
13

Personne n'a remarqué l'attribut html "accesskey" qui est disponible depuis un moment.

Il s'agit d'un moyen sans javascript pour les raccourcis clavier.

accesskey_browsers

Les raccourcis des attributs accesskey sur MDN

Destiné à être utilisé comme ça. L'attribut html lui-même est suffisant, cependant nous pouvons changer l'espace réservé ou un autre indicateur en fonction du navigateur et du système d'exploitation. Le script est une approche scratch non testée pour donner une idée. Vous voudrez peut-être utiliser un détecteur de bibliothèque de navigateur comme le petit bowser

let client = navigator.userAgent.toLowerCase(),
    isLinux = client.indexOf("linux") > -1,
    isWin = client.indexOf("windows") > -1,
    isMac = client.indexOf("apple") > -1,
    isFirefox = client.indexOf("firefox") > -1,
    isWebkit = client.indexOf("webkit") > -1,
    isOpera = client.indexOf("opera") > -1,
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

NVRM
la source
1
L'accès en a deux s.
kaiser
3
Ne semble pas répondre à la question du PO concernant le cas particulier de key = ENTER
Ozan Bellik
12

C'est une solution pour tous les amoureux de YUI :

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

Dans ce cas particulier, j'ai eu de meilleurs résultats en utilisant YUI pour déclencher des objets DOM qui ont été injectés avec la fonctionnalité de bouton - mais c'est une autre histoire ...

frhd
la source
12

Dans Angular2 :

(keyup.enter)="doSomething()"

Si vous ne voulez pas de retour visuel dans le bouton, c'est une bonne conception de ne pas référencer le bouton mais plutôt d'appeler directement le contrôleur.

De plus, l'ID n'est pas nécessaire - une autre façon NG2 de séparer la vue du modèle.

AlikElzin-kilaka
la source
1
Voici une question sur plus d'informations sur les options de saisie: stackoverflow.com/q/32155887/435605
AlikElzin-kilaka
10

Dans ce cas, vous souhaitez également désactiver le bouton Entrée de la publication sur le serveur et exécuter le script Js.

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
njoshsn
la source
9

Cette tentative de changement est proche, mais se comporte mal par rapport au navigateur à l'époque (sur Safari 4.0.5 et Firefox 3.6.3), donc en fin de compte, je ne le recommanderais pas.

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
beldaz
la source
Devrait également mentionner qu'il déclenche sur flou.
FluorescentGreen5
8
event.returnValue = false

Utilisez-le lorsque vous gérez l'événement ou dans la fonction que votre gestionnaire d'événements appelle.

Il fonctionne au moins dans Internet Explorer et Opera.

ELEK
la source
8

Pour jquery mobile je devais faire

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
user1071182
la source
2
.liveest déconseillé dans jQuery 1.7. Est-il toujours considéré comme OK dans jQuery Mobile?
Barmar
8

Pour ajouter une solution JavaScript complètement simple qui résout le problème de @ icedwater avec la soumission de formulaire , voici une solution complète avecform .

REMARQUE: c'est pour les "navigateurs modernes", y compris IE9 +. La version IE8 n'est pas beaucoup plus compliquée et peut être apprise ici .


Violon: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

Javascript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});
ruffin
la source
1
Les votes négatifs sans explication rendent difficile de répondre à vos préoccupations. Faites-moi savoir ce qui ne semble pas correct, et je serais heureux de faire un suivi.
ruffin
7

En Javascript moderne, non obsolète (sans keyCodeou onkeydown):

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
MCCCS
la source
C'est à mon avis la réponse la plus simple qui fait le travail. Dans mon cas d'utilisation, je l'ai mis à niveau vers onkeypress = "inputKeyPressed (event)", puis j'ai géré le paramètre event.which dans la fonction elle-même. La touche Entrée, par exemple, renvoie l'événement.qui est 13.
ak93
5
document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

Voici mes deux cents. Je travaille sur une application pour Windows 8 et souhaite que le bouton enregistre un événement de clic lorsque j'appuie sur le bouton Entrée. Je fais cela dans JS. J'ai essayé quelques suggestions, mais j'ai eu des problèmes. Cela fonctionne très bien.

Tequilaman
la source
Sorte d'excès pour placer le gestionnaire d'événements sur le document. Si vous aviez un charCodede 13 ailleurs, vous tirez sur le printResult().
ruffin
5

Pour le faire avec jQuery:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

Pour le faire avec du JavaScript normal:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});
appât
la source
5

Pour ceux qui aiment la brièveté et l'approche js moderne.

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

entrée est une variable contenant votre élément d'entrée.

Alexandr Tsyganok
la source
1

Pour JS moderne keyCodeest obsolète, utilisez keyplutôt

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}
Wariored
la source
0

Dans jQuery, vous pouvez utiliser event.which==13. Si vous en avez un form, vous pouvez l'utiliser $('#formid').submit()(avec les écouteurs d'événement corrects ajoutés à la soumission dudit formulaire).

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

hev1
la source
0

J'ai développé javascript personnalisé pour atteindre cette fonctionnalité en ajoutant simplement une classe

Exemple: <button type="button" class="ctrl-p">Custom Print</button>

Ici Check it out Fiddle
- or -
check out running example https://stackoverflow.com/a/58010042/6631280

Remarque: sur la logique actuelle, vous devez appuyer sur Ctrl+ Enter

Ravi Makwana
la source
-4

Cela pourrait également aider, une petite fonction JavaScript, qui fonctionne très bien:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

Je sais que cette question est résolue, mais je viens de trouver quelque chose, qui peut être utile pour les autres.

Niraj Chauhan
la source
5
La question était de déclencher un clic de bouton avec la touche Entrée dans une zone de texte. Votre solution est pour une fonctionnalité de type "filigrane".
kdenney