Question Déclencher un clic de clic avec JavaScript sur la touche Entrée dans une zone de texte


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 quand le Entrer touche est enfoncée à l'intérieur de la zone de texte?

Il y a déjà un bouton de soumission différent sur ma page actuelle, donc je ne peux pas simplement faire du bouton un bouton de soumission. Et moi seulement veux le Entrer clé pour cliquer sur ce bouton spécifique si elle est pressée à partir de cette boîte de texte, rien d'autre.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

1099
2017-09-30 21:32


origine


Réponses:


En jQuery, ce qui suit fonctionnerait:

$("#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, ce qui suit fonctionnerait:

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>


1284
2017-09-30 21:52



Ensuite, il suffit 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();"
/>

359
2017-09-30 21:56



Compris ceci:

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

165
2017-09-30 21:52



Faites du bouton un élément de soumission, ce 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 d'entrée pour faire ce travail (merci Sergey Ilinsky).

Ce n'est pas une bonne pratique de redéfinir le comportement standard, le Entrer key devrait toujours appeler le bouton submit sur un formulaire.


75
2017-09-30 21:33



Puisque personne n'a utilisé addEventListener pourtant, voici ma version. Compte tenu des éléments:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Je voudrais utiliser 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.

Remarque que ça vaut probablement la peine de s'assurer que c'est en dehors d'un <form> parce que quand j'ai inclus ces éléments dans eux en appuyant sur Entrée soumis le formulaire et rechargé la page. Il m'a fallu quelques clins d'œil pour découvrir.

Addenda: Merci à un commentaire de @ruffin, j'ai ajouté le gestionnaire d'événement manquant et un preventDefault pour permettre à ce code de fonctionner (probablement) à l'intérieur d'un formulaire. (Je vais essayer de tester cela, à quel point je vais supprimer le contenu entre crochets.)


67
2017-11-19 05:37



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.


55
2018-02-08 04:49



Un truc de base que vous pouvez utiliser pour cela que je n'ai pas vu entièrement mentionné. Si vous voulez faire une action ajax, ou un autre travail sur Entrée mais que vous ne voulez pas vraiment soumettre un 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>

Setting action = "javascript: void (0);" comme ceci est un raccourci pour empêcher le comportement par défaut essentiellement. 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 fait pour charger certaines données.


19
2017-09-12 19:27



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>

13
2018-03-02 08:04



Pour déclencher une recherche chaque fois que vous appuyez sur la touche Entrée, utilisez ceci:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

12
2017-10-27 03:35



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 à partir d'un projet un peu récent ... Je l'ai trouvé sur le net, et je n'ai aucune idée s'il y a une meilleure façon ou pas dans le vieil JavaScript.


11
2017-09-30 21:56



Bien que, je suis sûr que tant qu'il n'y a qu'un seul champ dans le formulaire et un bouton de soumission, en appuyant sur Entrée, vous devez soumettre le formulaire, même s'il y a un autre formulaire sur la page.

Vous pouvez ensuite capturer le formulaire avec js et effectuer la validation ou les rappels que vous souhaitez.


9
2017-10-01 09:51