Comment déclencher un événement de clic en appuyant sur la touche entrée? Zone de texte

Question

J'ai la zone de recherche qui fonctionne très bien comme je l'ai besoin pour, mais le problème est quand je frappe entrer ne recherche pas les résultats, vous devez appuyer sur le bouton pour le faire. J'ai essayé différents codes mais rien ne fonctionne et je me demande si quelqu'un a une solution pour cela. Ceci est du code que j'ai:

<input 
data-path=".title" 
data-button="#title-search-button" 
type="text" 
value="" 
placeholder="Search..." 
data-control-type="textbox" 
data-control-name="title-filter" 
data-control-action="filter" 
/> 

Je suppose que cela pourrait fonctionner avec « onkeydown = » mais pas vraiment sûr de ce à ajouter après.

J'apprécierais vraiment si quelqu'un a une solution pour cela.

Answer 1

Bien que vous puissiez utiliser l'attribut onkeydown, je préfère effectuer ces opérations via les gestionnaires d'événements JavaScript &. Si vous voulez faire cela avec l'attribut onkeydown, regardez la réponse de Bryan.

Je voudrais tout d'abord ajouter un nom ID/classe à l'entrée afin que nous puissions facilement cibler. Dans mon exemple, je vais ajouter searchText comme ID pour cette entrée.

JavaScript:

document.getElementById('searchText').addEventListener("keydown",function(e){ 
    if(e.keyCode == 13){ 
    //doSomething() 
    } 
}); 

jQuery:

$('#searchText').on('keydown',function(e){ 
    if(e.which == '13'){ 
    //doSomething(); 
    } 
}); 

Answer 2

Oui, cela fonctionnerait avec keydown. Mais vous devrez ajouter javascript pour que cela fonctionne.

<input 
    data-path=".title" 
    data-button="#title-search-button" 
    type="text" 
    value="" 
    placeholder="Search..." 
    data-control-type="textbox" 
    data-control-name="title-filter" 
    data-control-action="filter" 
    onkeydown="if (event.keyCode == 13) { // Your search results code here; 
    return false; }" 
/> 

Answer 3

Vous devez ajouter un écouteur d'événement pour keyup pour votre champ de saisie. e.keyCode vous donnera les touches spéciales (qui se trouve être 13 pour Entrée)

Voici un exemple:

$("#myinput").on('keyup', function (e) { 
 
    if (e.keyCode == 13) { 
 
     alert("Enter clicked"); 
 
     // add your code here 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input 
 
      id = "myinput" 
 
      data-path=".title" 
 
      data-button="#title-search-button" 
 
      type="text" 
 
      value="" 
 
      placeholder="Search..." 
 
      data-control-type="textbox" 
 
      data-control-name="title-filter" 
 
      data-control-action="filter" 
 
     />

Hope this helps!

Answer 4

J'ai donné un exemple de code ci-dessous en utilisant le plan javascript. Cette solution fonctionnera sans jquery ou d'autres bibliothèques.

Lors de l'événement de touche, vous pouvez soit appeler la même méthode que l'événement click (ou) déclencher le clic de bouton directement selon les codes option 1 et option 2 mentionnés ci-dessous.

function triggerSearch() { 
 
    if(event.keyCode === 13) { 
 
    // Option 1: You can call the 'search' method directly 
 
    //search(); 
 
    // Option 2: OR you can trigger the button `click` event 
 
    getElement('searchButton').click(); 
 
    } 
 
} 
 

 
function search() { 
 
    var searchTerm = getElement('searchTextBox').value; 
 
    getElement('searchTerm').innerHTML = searchTerm; 
 
} 
 

 
function getElement(id) { 
 
    return document.getElementById(id); 
 
}

<input 
 
      data-path=".title" 
 
      data-button="#title-search-button" 
 
      type="text" 
 
      value="" 
 
      placeholder="Search..." 
 
      data-control-type="textbox" 
 
      data-control-name="title-filter" 
 
      data-control-action="filter" 
 
      id="searchTextBox" 
 
      onkeydown="triggerSearch()" 
 
     /> 
 

 
<input type="button" value="Search" id="searchButton" onclick="search()" /> 
 
<br/><br/> 
 
Search Term: <span id="searchTerm"></span>