How to detect ENTER key press in HTML textbox?

By Anonymous - February 26, 2019

Suppose you have a search form in your web page. User type search keyword in the textbox(input tag) and press the ENTER key instead of click on the search button. How to detect ENTER key press HTML input tag?

Eg:

<input type="text" id="SearchKeyword"/>
<button type="button" onclick="Search()">Search</button>

<script>
//Using JQuery
$('#SearchKeyword').keyup(function(e)
{
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});

//Using JavaScript
document.getElementById("SearchKeyword").onkeypress = function(e)
{
if (e.keyCode === 13)
{
alert("Enter key pressed");
Search();
}
};
</script>

Final code and demo is here

<!DOCTYPE html><html>    <head>        <title>Tryit Editor - tools.bitcompiler.com</title>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <style>         </style>             </head>    <body>        <h1>How to detect ENTER key press in HTML textbox?</h1><h3>Using JQuery</h3><input type="text" id="SearchKeyword1"/>        <button type="button" onclick="Search()">Search</button><br/><br/>        <h3>Using JavaScript</h3><input type="text" id="SearchKeyword2"/>        <button type="button" onclick="Search()">Search</button>        <script>            function Search()             {                 alert("Searching started...");             }                          //Using JQuery             $(document).ready(function ()             {                 $('#SearchKeyword1').keypress(function (e)                 {                     if (e.keyCode === 13)                     {                         alert("Enter key pressed");                         Search();                     }                 });             });                          //Using JavaScript             document.getElementById("SearchKeyword2").onkeypress = function(e)             {                 if (e.keyCode === 13)                 {                     alert("Enter key pressed");                     Search();                 }             };         </script>    </body></html>

Demo

Search This Blog

Meaau cat

How to detect ENTER key press in HTML textbox?

Comments

Post a Comment

Popular posts from this blog

Gove confirms mandatory housebuilding targets for councils will be abolished in face of Tory rebellion – UK politics live

Ben Jennings on Matt Hancock’s return from I’m a Celebrity – cartoon

Kotak Mahindra Bank Recruitment 2022 Released for Graduate Candidates And Apply Online