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

Question

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 la touche Entrée 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 veux seulement que la touche Entrée clique sur ce bouton spécifique si vous appuyez dessus dans cette zone de texte, rien d’autre.

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

Answer 1

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, cela fonctionne:

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>

Answer 2

Ensuite, codez-le!

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

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

Answer 3

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>

Answer 4

Faites du bouton un élément de soumission pour qu'il soit 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 touche Entrée doit toujours appeler le bouton d'envoi d'un formulaire.

Answer 5

Étant donné que personne n'a encore utilisé addEventListener, voici ma version. Étant donné les éléments:

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

Je voudrais utiliser 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 conservant le code HTML propre.

  

Notez qu'il vaut probablement la peine de veiller à ce que cela soit en dehors d'un <form>, car lorsque je les ai enfermés, appuyer sur Entrée pour soumettre le formulaire et recharger la page. Il m'a fallu quelques clins d'œil à 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) également dans un formulaire. (Je vais essayer de le tester, puis je supprimerai le contenu entre crochets.)

  

Answer 6

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 simple.

Answer 7

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

Définition de 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.

Answer 8

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>

Answer 9

Pour lancer 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();
    }
}

Answer 10

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 assez récent ... Je l’ai trouvé sur le net, et je ne sais pas s’il existe une meilleure façon ou non de faire du vieux JavaScript.

Answer 11

Bien que je sois à peu près sûr que tant qu'il n'y a qu'un seul champ dans le formulaire et un seul bouton d'envoi, 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 de votre choix.

Answer 12

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

Answer 13

Dans Angular2 :

(keyup.enter)="doSomething()"

Si vous ne souhaitez 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'id n'est pas nécessaire - une autre façon NG2 de séparer la vue du modèle.

Answer 14

Personne n'a remarqué l'attibut HTML & "; accesskey &"; qui est disponible depuis un certain temps.

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

Raccourcis des attributs accesskey sur MDN

Destiné à être utilisé comme ceci. 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 navigateur 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>

Answer 15

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

Documents Mozilla

Navigateurs pris en charge

Answer 16

Cette connexion est proche, mais se comporte mal en ce qui concerne le navigateur (puis sur Safari 4.0.5 et Firefox 3.6.3), je ne le recommanderais donc pas en fin de compte.

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

Answer 17

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

Answer 18

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 au moins dans Internet Explorer et Opera.

Answer 19

Pour jquery mobile, je devais le faire

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

Answer 20

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

  

REMARQUE: il s'agit des & "navigateurs modernes &", y compris IE9 +. La version IE8 n’est pas beaucoup plus compliquée et peut être apprise ici .

Fiddle: 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 />";
            }
        });
    }
});

Answer 21

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 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.

Answer 22

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

Answer 23

Dans les versions modernes, non obsolètes (sans keyCode ni onkeydown) Javascript:

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

Answer 24

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

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

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

Answer 25

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

Answer 26

Cela pourrait également 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 pourrait être utile aux autres.