CODEWITHSUNDEEP
jqueryhtmljquery-mobile
VaTo
VaTo

Reputation: 3098

How to make an anchor tag active when pressing enter in jQuery mobile

I have a search button which I would like to be executed not only when I click on it but also when I press enter so it would be easier to make searches. Im using jQuery mobile to display the search button, here's the HTML code:

<div data-role="popup" id="csr-popup-search" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
    <div data-role="content">
        <div class="ui-grid-a" style="margin-top:0px;padding-top:0px;min-width:330px">
            <div class="ui-block-a" style="width:88%"><input type="search" name="search" id="search-basic" value="" placeholder="Search..."/></div>
            <div class="ui-block-b ui-responsive" style="width:10%;padding-top:3px;">
                <a href="#" data-role="button" data-iconpos="notext" data-theme="c" data-inline="true"  data-icon="search" onclick="ws.csr.search.run(this)">Search all</a></div>
        </div>

This is how it looks on my end:

search button

I know with buttons I just simply make it type="submit" but in this case this doesn't work since it is an anchor tag.

Upvotes: 1

Views: 1968

Answers (1)

chaggy
chaggy

Reputation: 1131

You can listen on the document for a keypress. If the key was enter (key code 13), you can then call your ajax.

$(document).on("keyup", function (event) {
    if (event.which == 13) {
        $("#id-of-a-tag").click();
    }
});

Upvotes: 3

Related Questions