Hi all, I have a button , <input type="button" name="button"> when I click on it I submit a value from another input text <input type="text" name="btxt"> to a javascript that does some irrelevant action to this question,
Question: Is it possible that I trigger this javascript by pressing return on the keyboard instead of clicking on the button.
Note: These inputs are not inside form tags
Here is fully working example (tested on FF 3.5), use a JS library like jQuery to fire event if you need more portability.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Onkeypress Test</title>
<script language="javascript">
function keyDowns(event) {
if (event.keyCode == 13) {
// If you are using jQuery just write this:
// $('#testbutton').trigger('click');
fireClickEvent(document.getElementById('testbutton'));
}
}
// Event firing is not portable
function fireClickEvent(control) {
if (document.all) {
control.fireEvent("onclick");
} else {
var clickEvent = window.document.createEvent("MouseEvent");
clickEvent.initEvent("click", false, true);
control.dispatchEvent(clickEvent);
}
}
</script>
</head>
<body onkeydown="keyDowns(event);">
<input type="button" name="button" value="Test" id="testbutton" onclick="alert('Clicked to me, you can do whatever')" />
</body>
</html>
I found this: Submitting Forms by Detecting Carriage Return / Enter Key Presses
This might work if you want to submit the form on Enter. This setup may not work for you though, because it looks like your input elements aren't in a form.
well, you can do it easily with form (which doesn't have to actually be submitted):
<form onsubmit="return yourAction();">
<input type="text" name="text" />
<button type="submit" name="button">Button</button>
</form>
and just return false; from yourAction()
you dont need you input button.
Try it this way:
<input type="text" name="btxt" onkeypress="submitValue(this.value)">
function submitValue(value)
{
var key;
if(event.keyCode)
key= event.keyCode;
else if(event.wich)
key=event.wich;
if(key==13)
callFunction(value);
}
You need to trap the onkeydown event. I don't know where you want this event to extend to - the whole web page, or just a part?
Anyway, assuming that you want the onkeydown event to happen to everything in a div tag, e.g.
<div id="keyTrapper" onkeydown="trapReturn(event);">
<input type="text" name="myText" id="myText" />
<input type="button" name="button" id="myButton" onclick="alert("Clicked!");" />
</div>
The javascript function you need is:
function trapReturn(event) {
if (event.keyCode == 13) {
var myButton = document.getElementById("myButton");
myButton.click();
}
}