Trigger

Question

I'm making a search bar with the text-bar as an tag, and the search-button as a , the reason I use a instead of is because I'm using a picture of a magnifying glass on the button, an when I use it doesn't want to position itself properly.

Here is my HTML:

<form id="search-form" href="#test1" class="smoothscroll">
            <input type="text" id="searchText" onClick="this.select();" placeholder="Search..."/>
            <button type="button" id="searchButton">
                <img src="magnify.png" id="magnify"/>
            </button>
        </form>

And here is the jquery:

$(document).ready(function () {
    $("#searchButton").click(function () {
        var text = document.getElementById('searchText').value;
        $("html, body").animate({
            scrollTop: ($('#' + text).offset().top)
        }, 2000);
    });

    $("#searchText").keyup(function (event) {
        if (event.keyCode == 13) {
            $("#searchButton").click();
        }
    });
});

Thank you for helping.

Any reason why var text = document.getElementById('searchText').value; used instead of $('#searchText').val(); ??? — ggdx, Nov 08 '13 at 08:40

score 2 · Answer 1 · edited Nov 08 '13 at 09:55

As per the docs, You should use .which instead of keyCode:

$("#searchText").keyup(function(event){
    if(event.which == 13){
        $("#searchButton").click();
    }
    // Make sure the form isn't submitted
    event.preventDefault();
});

To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code.

Rohan Kumar · Answer 2 · 2014-07-14T13:48:39.277

1

Try this

$("#searchText").keyup(function (event) {
    var code= event.keyCode ? event.keyCode : event.which;
    // or use simply, var code= event.keyCode || event.which;
    if (code == 13) {
        $("#searchButton").click();
    }
});

Demo

edited Jul 14 '14 at 13:48

answered Nov 08 '13 at 08:40

Rohan Kumar

40,431
11
76
106

Going to have to downvote this. jQuery normalizes the keyCode and which events, so there is no need for the ternary check here. – CodingIntrigue Nov 08 '13 at 08:45
@RGraham what you think `// Make sure the form isn't submitted event.preventDefault();` is enough to `prevent form submit`. `$("#searchButton").click();` `submits` the `form` without `preventing`. – Rohan Kumar Nov 08 '13 at 08:49
`searchButton` is not a submit button. The reason for adding this is so that when the user eventually *does* put a submit button in there (which I assume he will) pressing enter will not submit the form. – CodingIntrigue Nov 08 '13 at 08:51
But it `submits` the `form` – Rohan Kumar Nov 08 '13 at 08:52
I'm not saying you're wrong, but where does he call submit? I can't see it – CodingIntrigue Nov 08 '13 at 08:53

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

$("#searchText").keyup(function(event){

  if (event.which === 13) {
    $("#searchButton").trigger("click");
   }  
});

also see Javascript .keyCode vs. .which?

edited May 23 '17 at 10:24

Community

1
1

answered Nov 08 '13 at 08:38

Rituraj ratan

10,260
8
34
55

Trigger when pressing the Enter key in text input

3 Answers3

Trigger