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

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

Answer 2

Elle l'est, Oui, 2021. Et je crois que c'est toujours vrai.

---

NE PAS UTILISER keypress

1. keypress L'événement est non déclenché lorsque l'utilisateur appuie sur une touche qui ne produit aucun caractère comme Tab , Caps Lock , Delete , Backspace , Escape gauche et droite Shift , touches de fonction ( F1 - F12 ).

keypress événement _{<a href="https://developer.mozilla.org/en-US/docs/Web/Events/keypress" rel="noreferrer"><em>Réseau de développeurs Mozilla</em></a>}

El keypress est déclenché lorsqu'une clé est enfoncé et cette clé normalement produit une valeur de caractère . Utilisez input à la place.

2. Il a été déprécié.

keypress événement _{<a href="https://www.w3.org/TR/2018/WD-uievents-20181108/#event-type-keypress" rel="noreferrer"><em><strong>Événements de l'interface utilisateur </strong>(Projet de travail du W3C publié le 8 novembre 2018).</em></a>}

• NOTA | Le keypress L'événement est traditionnellement associé à la détection d'un valeur du caractère plutôt qu'une clé physique et peuvent ne pas être disponibles sur toutes les touches dans certaines configurations.
• AVERTISSEMENT | Le keypress Le type d'événement est défini dans la présente spécification à des fins de référence et d'exhaustivité. cette spécification déprécie l'utilisation de ce type d'événement. Lorsqu'ils sont dans des contextes d'édition, les auteurs peuvent s'abonner à l'outil beforeinput à la place.

---

NE PAS UTILISER KeyboardEvent.keyCode

1. Il a été déprécié.

KeyboardEvent.keyCode _{<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode" rel="noreferrer"><em>Réseau de développeurs Mozilla</em></a>}

Déprécié | Cette fonction n'est plus recommandée. Bien que certains navigateurs puissent encore la prendre en charge, il se peut qu'elle ait déjà été supprimée des normes Web pertinentes, qu'elle soit en passe de l'être ou qu'elle ne soit conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible. le tableau de compatibilité au bas de cette page pour guider votre décision. Sachez que cette fonction peut cesser de fonctionner à tout moment.

---

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

// Make sure this code gets executed after the DOM is loaded.
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;`.
});

Answer 3

Il existe une solution sans js.

Set type=submit sur le bouton que vous souhaitez voir par défaut et type=button à d'autres boutons. Maintenant, dans le formulaire ci-dessous, vous pouvez appuyer sur la touche Entrée dans n'importe quel champ de saisie, et la touche Render fonctionnera (malgré le fait qu'il s'agisse du deuxième bouton du formulaire).

Ejemplo:

    <button id='close_renderer_button' class='btn btn-success'
            title='Перейти к редактированию программы'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            title='Построить фрактал'
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Testé dans FF24 et Chrome 35 ( formaction est une fonctionnalité html5, mais type ne l'est pas).

Answer 4

1. Remplacer le button avec un submit
2. Soyez progressif assurez-vous que vous avez une version côté serveur
3. Liez votre JavaScript au submit du formulaire, et non le click gestionnaire du bouton

Le fait d'appuyer sur la touche "Entrée" dans le champ déclenchera la soumission du formulaire, et le gestionnaire de soumission se déclenchera.

Answer 5

Vous pouvez ajouter un gestionnaire d'événement à votre entrée comme suit :

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