In my HTML page, I had a textbox for user to input keyword for searching. When they click the search button, the JavaScript function will generate a URL and run in new window.
The JavaScript function work properly when the user clicks the search button by mouse, but there is no response when the user presses the ENTER key.
function searching(){ var keywordsStr = document.getElementById('keywords').value; var cmd ="http://XXX/advancedsearch_result.asp?language=ENG&+"+ encodeURI(keywordsStr) + "&x=11&y=4"; window.location = cmd; }
<form name="form1" method="get"> <input name="keywords" type="text" id="keywords" size="50" > <input type="submit" name="btn_search" id="btn_search" value="Search" onClick="javascript:searching(); return false;" onKeyPress="javascript:searching(); return false;"> <input type="reset" name="btn_reset" id="btn_reset" value="Reset"> </form>
To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery. keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or to run a function when a keyup event occurs.
To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. Explanation: We use the jQuery event. which to check the keycode on the keypress.
And the following JavaScript code to detect whether the Enter key is pressed: const input = document. querySelector("input"); input. addEventListener("keyup", (event) => { if (event.
As scoota269 says, you should use onSubmit
instead, cause pressing enter on a textbox will most likey trigger a form submit (if inside a form)
<form action="#" onsubmit="handle"> <input type="text" name="txt" /> </form> <script> function handle(e){ e.preventDefault(); // Otherwise the form will be submitted alert("FORM WAS SUBMITTED"); } </script>
If you want to have an event on the input-field then you need to make sure your handle()
will return false, otherwise the form will get submitted.
<form action="#"> <input type="text" name="txt" onkeypress="handle(event)" /> </form> <script> function handle(e){ if(e.keyCode === 13){ e.preventDefault(); // Ensure it is only this code that runs alert("Enter was pressed was presses"); } } </script>
Use onkeypress
. Check if the pressed key is enter (keyCode = 13). if yes, call the searching()
function.
HTML
<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleKeyPress(event)">
JAVASCRIPT
function handleKeyPress(e){ var key=e.keyCode || e.which; if (key==13){ searching(); } }
Here is a snippet showing it in action:
document.getElementById("msg1").innerHTML = "Default"; function handle(e){ document.getElementById("msg1").innerHTML = "Trigger"; var key=e.keyCode || e.which; if (key==13){ document.getElementById("msg1").innerHTML = "HELLO!"; } }
<input type="text" name="box22" value="please" onkeypress="handle(event)"/> <div id="msg1"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With