web-dev-qa-db-fra.com

Déclenchez un clic de bouton 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 utiliser JavaScript pour déclencher l'événement de clic du bouton lorsque le Enter touche est enfoncée dans la zone de texte?

Il y a déjà un bouton de soumission différent sur ma page actuelle, je ne peux donc tout simplement pas en faire un bouton de soumission. Et, je seulement veux le Enter touche pour cliquer sur ce bouton spécifique s’il est pressé dans cette zone de texte, rien d’autre.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
javascriptbuttononclickonkeypress
1228
kdenney

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>
1376
Steve Paulo

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();"
/>
383
Sergey Ilinsky

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

Faites du bouton un élément de soumission, ce sera donc 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, le Enter La clé doit toujours appeler le bouton d'envoi d'un formulaire.

79
albertein

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

Je voudrais utiliser les éléments suivants:

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 conservant le code HTML vierge.

Note qu'il vaut probablement la peine de s'assurer que c'est en dehors d'un <form> parce que, lorsque j'ai enfermé ces éléments dans ceux-ci, appuyer sur Entrée a soumis le formulaire et rechargé la page. Il m'a fallu quelques clins d'œil à découvrir.

Addendum: Merci à 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 également. (Je vais essayer de le tester, puis supprimer le contenu entre crochets.)

73
icedwater

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 dans jQuery uniquement, alors j'ai pensé à donner quelque chose en JavaScript simple.

58
Varun

Un truc de base que vous pouvez utiliser pour cela et que je n’ai pas vu pleinement mentionné. Si vous souhaitez effectuer une action ajax ou effectuer un autre travail sur Entrée, mais que vous ne souhaitez 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 est effectué pour charger certaines données.

21
Switters

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

Pour déclencher une recherche chaque fois que vous appuyez sur la touche Entrée, utilisez ceci:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
14
me_an
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 un peu récent ... Je l'ai trouvé sur le net, et je ne sais pas s'il existe une meilleure façon ou non d'utiliser du vieux JavaScript.

13
Max Schmeling

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

Vous pouvez ensuite capturer le formulaire onsubmit avec js et faire la validation ou les rappels de votre choix.

12
garrow

Dans Angular2:

(keyup.enter)="doSomething()"

Si vous ne voulez pas de retour visuel dans le bouton, il est judicieux de ne pas référencer le bouton, mais d'appeler directement le contrôleur.

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

11
AlikElzin-kilaka

Ceci est une solution pour tous les amoureux 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 obtenu de meilleurs résultats en utilisant YUI pour déclencher des objets DOM injectés avec une fonctionnalité de bouton - mais c’est une autre histoire ...

11
frhd

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

Ceci est une méthode sans javascript pour les raccourcis clavier.

accesskey_browsers

Les raccourcis d'attributs accesskey sur MDN

Destiné à être utilisé comme ça. L'attribut html lui-même est suffisant, mais nous pouvons changer le paramètre fictif 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 navigation tel que 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>
11
NVRM

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

10
Gibolt

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();" />
9
njoshsn

Cette tentative onchange est proche, mais se comporte mal en ce qui concerne le navigateur en arrière, puis en avant (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();" />
9
Luke Nezda
event.returnValue = false

Utilisez-le pour gérer l'événement ou dans la fonction appelée par votre gestionnaire d'événements.

Cela fonctionne dans Internet Explorer et au moins Opera.

8
ELEK

Pour jquery mobile je devais faire

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
8
user1071182

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

NOTE: Ceci est destiné aux "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 />";
            }
        });
    }
});
7
ruffin
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 souhaite que le bouton enregistre un événement de clic lorsque j'appuie sur le bouton Entrée. Je le fais dans JS. J'ai essayé quelques suggestions, mais j'avais des problèmes. Cela fonctionne très bien.

5
Tequilaman

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();
    }
});
5
clickbait

Dans les temps modernes, non déclarés (sans keyCode ou onkeydown) Javascript:

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
4
MCCCS

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

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

où input est une variable contenant votre élément input.

3
Alexandr Tsyganok

Dans jQuery, vous pouvez utiliser event.which==13. Si vous avez un form, vous pouvez utiliser $('#formid').submit() (avec les écouteurs d'événements appropriés 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
hev1