Comment déclencher un bouton HTML lorsque vous appuyez sur Enter dans une zone de texte ?

Question

Donc le code que j'ai jusqu'à présent est :

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

Ce n'est pas dans un <form> et est juste tel qu'il est dans un <div> . Cependant, lorsque je tape quelque chose dans le champ textbox appelé "addLinks" Je veux que l'utilisateur puisse appuyer sur Enter et déclencher le "linkadd". button qui exécutera ensuite une fonction JavaScript.
Comment puis-je le faire ?
Merci

Edit : J'ai trouvé ce code, mais il ne semble pas fonctionner.

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

Answer 1

N'utilisez pas Javascript pour cette solution !!!

Pages HTML modernes automatiquement permettent au bouton d'envoi d'un formulaire de soumettre la page avec l'option ENTER / RETURN lorsque n'importe quel contrôle de champ de formulaire de la page Web associé à une clé de type submit le type de bouton ou d'entrée sur lequel l'utilisateur met l'accent, autofocus est défini sur un champ, un bouton ou une entrée du formulaire, ou si l'utilisateur utilise la tabulation dans l'un des champs du formulaire. L'appui sur la touche ENTER ou RETURN du clavier déclenche alors automatiquement le premier bouton d'envoi ou le premier contrôle de saisie disponible pour ce formulaire.

Ainsi, au lieu de JavaScript, une solution plus simple est d'ajouter simplement tabindex=0 sur l'un de vos champs de formulaire ou sur les boutons d'envoi à l'intérieur d'un élément de formulaire. autofocus sur le premier contrôle de saisie ou bouton d'envoi. Tabindex=0 affecte cette entrée à la liste des éléments de page indexés par ordre de tabulation, et l'autofocus déplace le focus sur n'importe lequel de vos champs de formulaire, déclenchant la réponse de n'importe quel bouton d'envoi à la commande de la touche ENTER/RETURN. L'utilisateur peut maintenant appuyer sur la touche "ENTRÉE" de son clavier pour soumettre le formulaire à tout moment. Cette méthode présente également l'avantage de mettre l'accent sur le premier champ du formulaire et de le préparer à recevoir des données de la part de l'utilisateur. Un exemple ci-dessous :

<form id="buttonform2" name="buttonform2" action="#" method="get" role="form">
  <label for="username1">Username</label>
  <input type="text" id="username1" name="username" value="" size="20" maxlength="20" title="Username" tabindex="0" autofocus="autofocus" />
  <label for="password1">Password</label>
  <input type="password" id="password1" name="password" size="20" maxlength="20" value="" title="Password" tabindex="0" role="textbox" aria-label="Password" />
  <button id="button2" name="button2" type="submit" value="submit" form="buttonform2" title="Submit" tabindex="0" role="button" aria-label="Submit">Submit</button>
</form>

Arrêtez de tout scripter ! Les navigateurs ont cette capacité native depuis presque 20 ans ! !!

Answer 2

Utilisation du HTML pur formulaire :

<form class="my-form" action="javascript:myFunction();">
    <button>Submit</button>
</form>

Par défaut, les navigateurs interprètent Enter comme la soumission d'un formulaire. <button> par défaut est de type "submit" et accède à ce qui se trouve dans le dossier de formulaire action (remplacé si l'attribut de bouton formaction est présent). Dans ce cas, pour plus de simplicité, j'utilise une fonction javascript avec l'attribut javascript: pseudo-protocole mais il pourrait s'agir d'un écouteur d'événements en javascript ou d'une méthode GET/POST comme dans les formulaires normaux.

Answer 3

<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});

Answer 4

J'utilise un bouton Kendo. Ceci a fonctionné pour moi.

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>