Déclenchez un bouton cliquez avec JavaScript sur la touche entrée dans une zone de texte

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 touche Enter est enfoncée dans la zone de texte?

Il y a déjà un bouton de soumission différent sur ma page actuelle, donc je ne peux pas simplement faire du bouton un bouton de soumission. Et, je seulement veux que la touche Enter clique sur ce bouton spécifique si elle est pressée à partir de cette zone de texte, rien d'autre.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
1120
demandé sur Sam Axe 2008-10-01 01:32:09

25 réponses

Dans jQuery, ce qui suit fonctionnerait:

$("#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, ce qui suit fonctionnerait:

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>
1301
répondu Steve Paulo 2018-02-04 18:58:45

Ensuite, il suffit 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();"
/>
364
répondu Sergey Ilinsky 2015-12-28 09:23:28

Compris ceci:

<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>
166
répondu kdenney 2015-11-12 04:53:20

Faites du bouton un élément de soumission, donc ce sera automatique.

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

Notez que vous aurez besoin d'un élément <form> 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 touche Enter doit toujours appeler le bouton submit sur un formulaire.

75
répondu albertein 2015-12-28 09:25:52

Puisque personne n'a encore utilisé addEventListener, 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 modifier le type d'événement et l'action séparément tout en gardant le code HTML propre.

Notez qu'il vaut probablement la peine de s'assurer que cela est en dehors d'un <form> car lorsque j'ai joint ces éléments en appuyant sur Entrée, j'ai soumis le formulaire et rechargé la page. Il m'a fallu quelques clignements pour découvrir.

Addendum : grâce à un commentaire de @ruffin, j'ai ajouté le gestionnaire d'événements manquant et un preventDefault pour permettre à ce code de fonctionner (vraisemblablement) dans un formulaire. (Je vais me déplacer pour tester cela, à quel point je vais supprimer le contenu entre crochets.)

67
répondu icedwater 2015-12-28 09:28:29

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 en jQuery seulement, donc j'ai pensé à donner quelque chose en JavaScript simple aussi.

55
répondu Varun 2013-05-09 10:17:17

Une astuce de base que vous pouvez utiliser pour cela que je n'ai pas vu complètement mentionné. Si vous voulez faire une action ajax, ou un autre travail sur Enter mais que vous ne voulez pas soumettre un 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>

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

19
répondu Switters 2013-09-12 19:27:56

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>
13
répondu mahbub_siddique 2015-03-02 08:04:35

Pour déclencher une recherche chaque fois que la touche entrée est enfoncée, utilisez ceci:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
12
répondu me_an 2011-12-29 18:34:44
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 y a un meilleur moyen ou pas dans le vieux JavaScript.

11
répondu Max Schmeling 2011-12-29 18:32:53

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 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 faire la validation ou les rappels que vous voulez.

9
répondu garrow 2008-10-01 09:51:32

Personne n'a remarqué le HTML attibute "accesskey" qui est disponible depuis un moment.

C'est un moyen non javascript pour les raccourcis clavier.

accesskey_browsers

Les raccourcis d'attributs accesskey sur MDN

Destiné à être utilisé comme ceci. L'attribut html lui-même est suffisant, cependantnous 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 souhaiterez peut-être utiliser un détecteur de bibliothèque de navigateur comme le minuscule 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", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
9
répondu Cryptopat 2017-12-05 17:19:41

C'est une solution pour tous les YUI les amateurs là-bas:

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 des fonctionnalités de bouton-mais c'est une autre histoire...

8
répondu frhd 2013-08-29 14:01:38

CE onchange la tentative est proche, mais se comporte mal en ce qui concerne le navigateur à l'époque (sur Safari 4.0.5 et Firefox 3.6.3), donc finalement, je ne le recommanderais pas.

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
7
répondu beldaz 2012-01-20 00:38:03

Dans Angular2:

(keyup.enter)="doSomething()"

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

En outre, l'id n'est pas nécessaire - une autre façon NG2 de séparer entre la vue et le modèle.

7
répondu AlikElzin-kilaka 2015-08-22 11:56:32
event.returnValue = false

Utilisez-le lors de la gestion de l'événement ou dans la fonction que votre gestionnaire d'événements appelle.

Cela fonctionne dans Internet Explorer et Opera au moins.

6
répondu ELEK 2011-05-26 20:35:15

Pour jQuery mobile je devais faire

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
6
répondu user1071182 2012-05-16 20:44:52

Dans le cas où vous voulez également activer 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();" />
6
répondu njoshsn 2015-04-02 09:37:26

Pour ajouter une solution JavaScript complètement simple qui a abordé le problème de @icedwater avec la soumission de formulaire , Voici une solution complète avec form.

Remarque: ceci est pour les "navigateurs modernes", y compris IE9+. La version IE8 n'est pas beaucoup plus compliquée, et peut être appris 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 />";
            }
        });
    }
});
5
répondu ruffin 2017-05-23 12:02:46

Utilisez keypress et 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();
    }
});

Mozilla Docs

Navigateurs Pris En Charge

5
répondu Gibolt 2018-06-28 15:43:47
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();
    }
};

Heres mes deux cents. Je travaille sur une application Pour Windows 8 et je veux 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 bien.

4
répondu Tequilaman 2014-05-19 12:40:51

Pour le faire avec jQuery:

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

Pour le faire avec JavaScript normal:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});
3
répondu clickbait 2015-10-01 06:11:49

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

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

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

2
répondu Alexandr Tsyganok 2018-01-28 15:41:02

Dans jQuery, vous pouvez utiliser event.which==13. Si vous avez un form, vous pouvez utiliser $('#formid').submit() (avec les écouteurs d'événements 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>
0
répondu hev1 2018-07-09 22:09:43

Cela pourrait aussi aider, une petite fonction JavaScript, qui fonctionne 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.

-4
répondu Niraj Chauhan 2011-09-13 10:45:41