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

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>

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

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>

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.

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

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.

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.

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>

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

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.

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

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.

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.

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>

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

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.

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

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

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.

Pour jquery mobile je devais faire

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

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

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

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

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.

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

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

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

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

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

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

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>

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

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.