web-dev-qa-db-fra.com

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

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 c'est comme dans un <div>. Toutefois, 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 "linkadd" button qui exécutera ensuite une fonction JavaScript.
Comment puis-je faire ceci?
Merci

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

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});
htmlbuttoninputtextbox
92
Ben
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});
107
Man Programmer

Il existe une solution sans js.

Réglez type=submit sur le bouton que vous souhaitez utiliser par défaut et type=button sur les autres boutons. Dans le formulaire ci-dessous, vous pouvez maintenant appuyer sur la touche Entrée de n’importe quel champ et le bouton Render fonctionnera (même s’il s’agit du deuxième bouton du formulaire).

Exemple:

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

59
dmitry_romanov

Nous sommes en 2019.

NE PAS UTILISER keypress

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

    keypress événement  Réseau de développeurs Mozilla

    L'événement keypress est déclenché lorsqu'une touche est enfoncée, et cette touche normalement produit une valeur de caractère. Utilisez input à la place.

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

    keypress événement Evénements d'interface utilisateur (Le document de travail du W3C a été publié le 8 novembre 2018.)

    • NOTE | L'événement keypress est traditionnellement associé à en détectant 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.
    • WARNING | Le type d'événement keypress est défini dans cette spécification pour référence et complétude, mais cette spécification déconseillé l'utilisation de ce type d'événement. Dans les contextes d'édition , les auteurs peuvent s’abonner à l’événement beforeinput .

NE PAS UTILISER KeyboardEvent.keyCode

  1. Il est obsolète.

    KeyboardEvent.keyCode  Réseau de développeurs Mozilla

    Obsolète | Cette fonctionnalité n'est plus recommandée. Bien que certains navigateurs le prennent encore en charge, il a peut-être déjà été supprimé des normes Web pertinentes, en cours de suppression ou peut être conservé uniquement à des fins de compatibilité. É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 devrais-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;`.
});
53
Константин Ван
  1. Remplacez le button par un submit
  2. Be progressive , assurez-vous d'avoir une version côté serveur
  3. Liez votre JavaScript au gestionnaire submit du formulaire, pas au gestionnaire click du bouton

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

10
Quentin

Vous pouvez ajouter un gestionnaire d'événements à votre entrée de la manière suivante:

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

Cela fonctionne quand input type = "button" est remplacé par input type = "submit" pour le bouton par défaut qui doit être déclenché.

2
Sud

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

À partir de réponses précédentes, je suis arrivé à ceci:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

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

Jetez un coup d'œil au violon

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

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

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

puis utilisez un code basé sur jquery ...

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

J'ai trouvé le tutoriel de w3schools.com, leur page m'essayer est la suivante.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

Cela fonctionnait dans mon navigateur habituel mais ne fonctionnait pas dans mon application php qui utilise le navigateur php intégré.

Après avoir joué un peu, j'ai proposé l'alternative JavaScript pur suivante qui convient à ma situation et devrait fonctionner dans toutes les autres situations:

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML Appuyez sur la touche Entrée dans la zone de texte pour activer le bouton.

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>
0
Scott Tovey