How to trigger click event when pressing enter key? Text area

Question

I have search area which works fine as I need it to but the problem is when i hit enter it won't search for results, so you need to press button to do so. I tried different codes but nothing is working and I'm wondering if anyone has solution for it. This is code that I have:

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

I guess this could work with "onkeydown=" but not really sure what to add after it.

I would really appreciate if someone has solution for this.

Possible duplicate of [Detect the Enter key in a text input field](http://stackoverflow.com/questions/7060750/detect-the-enter-key-in-a-text-input-field) — Asons, Nov 12 '16 at 08:30

score 3 · Accepted Answer · answered Nov 12 '16 at 08:48

3

Although you can use the onkeydown attribute I prefer to do these things through JavaScript event listeners & handlers. If you want to do this with the onkeydown attribute then look at Bryan's answer.

I would first add an ID/Class name to the input so we can easily target it. In my example i will add searchTextas the ID for this input.

JavaScript:

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

jQuery:

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

answered Nov 12 '16 at 08:48

Michael Goodwin

700
6
16

Thank you i got it working now. Also thanks everyone else for help. – UXRO Nov 12 '16 at 12:02
1

document.getElementById('searchText').onkeydown will be more compatible – mplungjan Nov 12 '16 at 16:35
Well the result is same for me, why is that better to be used? – UXRO Nov 13 '16 at 13:24

score 1 · Answer 2 · answered Nov 12 '16 at 08:41

Yes, this would work with keydown. But you will need to add javascript for it to work.

<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; }"
/>

score 0 · Answer 3 · answered Nov 12 '16 at 08:46

0

You will have to add an event listener for keyup for your input field. e.keyCode will give you the special keys (which happens to be 13 for Enter)

Here is an example:

$("#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!

answered Nov 12 '16 at 08:46

Rohin Gopalakrishnan

654
4
17

Question not tagged jQuery – mplungjan Nov 12 '16 at 09:23
I'm sorry, I'm new to stackoverflow did not know that you cannot give a solution using jquery if it's not tagged that. So, that would mean I cannot use HTML5, if it's tagged html or even any other additional libraries (in any language) unless otherwise specifically mentioned in the tags? – Rohin Gopalakrishnan Nov 12 '16 at 16:28
From the question it is clear the OP is noob and the use of onkeydown in the tag instead of JavaScript or jQuery signals that OP knows about plain JS. Just take it into account when answering. Normally JavaScript only questions will be tagged JavaScript. This one was not specifically tagged with either. PS: Your choice of library also rules out IE8 – mplungjan Nov 12 '16 at 16:33

Aruna · Answer 4 · 2016-11-12T09:01:05.777

I have given a sample code below using plan javascript. This solution will work without jquery or other libraries.

On the key press event, you can either call the same method of the click event (or) trigger the button click directly as per the option 1 and option 2 mentioned below.

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>

How to trigger click event when pressing enter key? Text area

4 Answers4