How to capture Enter key press?
JavascriptTextboxKeypressDom EventsOnkeypressJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
Form approach
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>
Textbox approach
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>
Solution 2 - Javascript
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>
Solution 3 - Javascript
Try this....
HTML inline
onKeydown="Javascript: if (event.keyCode==13) fnsearch();"
or
onkeypress="Javascript: if (event.keyCode==13) fnsearch();"
JavaScript
<script>
function fnsearch()
{
alert('you press enter');
}
</script>
Solution 4 - Javascript
Use event.key
instead of event.keyCode
!
function onEvent(event) {
if (event.key === "Enter") {
// Submit form
}
};
Solution 5 - Javascript
You can use javascript
ctl.attachEvent('onkeydown', function(event) {
try {
if (event.keyCode == 13) {
FieldValueChanged(ctl.id, ctl.value);
}
false;
} catch (e) { };
return true
})
Solution 6 - Javascript
Small bit of generic jQuery for you..
$('div.search-box input[type=text]').on('keydown', function (e) {
if (e.which == 13) {
$(this).parent().find('input[type=submit]').trigger('click');
return false;
}
});
This works on the assumes that the textbox and submit button are wrapped on the same div. works a treat with multiple search boxes on a page
Solution 7 - Javascript
Use an onsubmit attribute on the form tag rather than onclick on the submit.
Solution 8 - Javascript
You need to create a handler for the onkeypress
action.
HTML
<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleEnter(this, event)" />
JS
function handleEnter(inField, e)
{
var charCode;
//Get key code (support for all browsers)
if(e && e.which)
{
charCode = e.which;
}
else if(window.event)
{
e = window.event;
charCode = e.keyCode;
}
if(charCode == 13)
{
//Call your submit function
}
}
Solution 9 - Javascript
// jquery press check by Abdelhamed Mohamed
$(document).ready(function(){
$("textarea").keydown(function(event){
if (event.keyCode == 13) {
// do something here
alert("You Pres Enter");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea></textarea>
Solution 10 - Javascript
<form action="#">
<input type="text" id="txtBox" name="txt" onkeypress="handle" />
</form>
<script>
$("#txtBox").keypress(function (e) {
if (e.keyCode === 13) {
alert("Enter was pressed was presses");
}
return false;
});
</script>
Solution 11 - Javascript
This is simple ES-6 style answer. For capturing an "enter" key press and executing some function
<input
onPressEnter={e => (e.keyCode === 13) && someFunc()}
/>