On enter key press change cursor position javaScript?
Question
I have form with two text fields and onLoad="document.forms.obrazac.sifra.focus()" I put cursor on the first field. Now I want when user press enter key to focus cursor on second field and then when enter is pressed again I want to submit my form. How can I do that, thanks.
4 answers
solution1
2 ACCPTED 2012-05-22 14:45:31
It's definitely not good to break the default behavior. Btw, do you know the autofocus attribute in HTML?
If you absolutely need this, here you go:
document.forms.obrazac.onkeypress = function( e ) {
// If the hit key is "Enter"
if ( e.keyCode === 13 ) {
// Cross-browser handling for our dear friend @MaxArt :p
var evt = e || window.event,
target = evt.target || evt.srcElement,
// Find the next input
nextInput = target.nextSibling;
while ( nextInput.tagName !== 'INPUT' && nextInput.nextSibling ) {
nextInput = nextInput.nextSibling;
}
// And focus it
nextInput.focus();
// Finally, disable submitting IF there is no input after
if ( nextInput !== this.elements[ this.elements.length - 1 ] ) {
return false;
}
}
};
solution2
1 2012-05-22 15:07:21
Just a short not realy testet sample... just to give u an idea:
<head>
<script type="text/javascript">
function onKeyPress(args)
{
if(args.keyCode === 13)
document.getElementById("tb2").focus();
}
</script>
</head>
<body>
<input type="text" onkeypress="onKeyPress(event);" id="tb1" />
<input type="text" id="tb2" />
</body>
You could do the same on tb2 to submit the form there on "ENTER" I would also use something like jQuery to bind the events in javascript, not directly in the markup.
Hope it helps.
@as i have started creating my sample there where no answers =)
solution3
0 2012-05-22 14:48:39
I wouldn't break the default behavior, it's pretty annoying and counterintuitive for the users, but if you really want to do it, you could do something like this with jquery:
$('#form').keydown(function(e) {
if( e.keyCode === 13) { // When "Shift + Enter"
e.preventDefault();
// focus on next field here.
}
});
Instead of doing this, you would be better off just making the right tab order like this (with tabindex):
<input type="text" name="field1" tabindex=1 /><br />
solution4
-1 2012-05-22 14:46:55
Try this:
document.forms.obrazac.sifra.addEventListener("keyup", function(e) {
if (e.keyCode === 13) { // 13 === enter key
e.preventDefault();
this.nextSibling.focus();
}
});
Mind these things:
- I used
addEventListener, but in IE8 and older you have to useattachEvent("onkeyup"...and checking the globaleventobject. Moreover,e.preventDefault();becomese.returnValue = false; - I supposed that
this.nextSiblingis the next field. Correct this to fit you DOM.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.