Comment déclencher le bouton HTML lorsque vous appuyez sur Entrée dans la zone de texte?

Donc, le code que j’ai à ce jour est le suivant:

 

Il ne se trouve pas dans un

et se trouve exactement dans un

. Cependant, lorsque je tape quelque chose dans la textbox appelée “addLinks”, je souhaite que l’utilisateur puisse appuyer sur Entrée et déclencher le button “linkadd” qui exécutera alors une fonction JavaScript.
Comment puis-je faire ceci?
Merci

Edit: J’ai trouvé ce code, mais cela ne semble pas fonctionner.

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

 $(document).ready(function(){ $('#TextBoxId').keypress(function(e){ if(e.keyCode==13) $('#linkadd').click(); }); }); 

Il existe une solution sans js.

Définir le type=submit au bouton que vous souhaitez définir par défaut et type=button pour les autres boutons. Maintenant, dans le formulaire ci-dessous, vous pouvez appuyer sur Entrée dans tous les champs de saisie, et le bouton Render fonctionnera (malgré le fait que ce soit le deuxième bouton du formulaire).

Exemple:

    

Testé dans FF24 et Chrome 35 ( formaction est la fonctionnalité html5, mais le type n’est pas).

C’est 2018.


N’UTILISEZ PAS le keypress

  1. keypress ne se déclenche pas lorsque l’utilisateur appuie sur une touche qui ne produit aucun caractère , comme Tab , Verr Maj , Suppr , Retour arrière, Echap , Maj gauche et droit, touches de fonction ( F1F12 ).

    événement keypress du réseau de développeurs Mozilla

    L’événement de keypress est déclenché lorsqu’une touche est enfoncée et que cette touche produit normalement une valeur de caractère . Utilisez plutôt la input .

  2. Il a été déconseillé.

    événement de keypress du DOM niveau 3 – document de travail du W3C, 04 août 2016 – Événements de l’interface utilisateur

    REMARQUE: L’événement keypress est traditionnellement associé à la détection d’une valeur de caractère plutôt qu’à une clé physique et peut ne pas être disponible sur toutes les clés dans certaines configurations. AVERTISSEMENT: Le type d’événement keypress est défini dans cette spécification pour référence et exhaustivité, mais cette spécification déconseille l’utilisation de ce type d’événement. Dans les contextes d’édition, les auteurs peuvent s’abonner à l’événement beforeinput à la place.


NE PAS UTILISER KeyboardEvent.keyCode

  1. Il a été déconseillé.

    KeyboardEvent.keyCode de Mozilla Developer Network

    Obsolète: cette fonctionnalité a été supprimée des normes Web. Bien que certains navigateurs puissent toujours le supporter, il est en train d’être supprimé. Évitez de l’utiliser et mettez à jour le code existant si possible. voir le tableau de compatibilité au bas de cette page pour guider votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.


Que dois-je utiliser alors? (La bonne pratique)

Version ES6

 // Put this code at the end of the . document.querySelector("#addLinks").addEventListener("keyup", event => { if(event.key !== "Enter") return; // Use `.key` instead. document.querySelector("#linkadd").click(); // Things you want to do. event.preventDefault(); // No need to `return false;`. }); 

Version non-ES6

 // Put this code at the end of the . document.querySelector("#addLinks").addEventListener("keyup", function(event) { if(event.key !== "Enter") return; // Use `.key` instead. document.querySelector("#linkadd").click(); // Things you want to do. event.preventDefault(); // No need to `return false;`. }); 
  1. Remplacez le button par un submit
  2. Soyez progressif , assurez-vous d’avoir une version côté serveur
  3. Liez votre JavaScript au gestionnaire de submit du formulaire, pas le gestionnaire de click du bouton

Appuyer sur Entrée dans le champ déclenchera la soumission du formulaire et le gestionnaire de soumission se déclenchera.

Vous pouvez append un gestionnaire d’événement à votre entrée comme suit:

 document.getElementById('addLinks').onkeypress=function(e){ if(e.keyCode==13){ document.getElementById('linkadd').click(); } } 

Tout d’abord, ajoutez jquery au fichier de bibliothèque jquery et appelez-le dans votre tête HTML.

puis utilisez le code basé sur jquery …

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

Cela devrait le faire, j’utilise jQuery, vous pouvez écrire du javascript simple.
Remplacez sendMessage() par votre fonctionnalité.

 $('#addLinks').keypress(function(e) { if (e.which == 13) { sendMessage(); e.preventDefault(); } }); 

Sur la base de certaines réponses précédentes, j’ai trouvé ceci:

     $('#but').click(function(e) { alert('button press'); e.preventDefault(); }); 

Jetez un oeil au violon

EDIT: Si vous ne voulez pas append d’éléments HTML supplémentaires, vous pouvez le faire uniquement avec JS:

  $("input").keyup(function(event) { if (event.keyCode === 13) { $("button").click(); } }); 

Il fonctionne lorsque input type = “button” est remplacé par input type = “submit” pour le bouton par défaut qui doit être déclenché.

J’utilise un bouton de kendo. Cela a fonctionné pour moi.

 
Search By Customer Name/ Customer Number: @Html.TextBox("txtSearchSsortingng", null, new { style = "width:400px" , autofocus = "autofocus" }) @(Html.Kendo().Button() .Name("btnSearch") .HtmlAtsortingbutes(new { type = "button", @class = "k-primary" }) .Content("Search") .Events(ev => ev.Click("onClick")))