Setup:
On a html page with three text inputs side by side, 'Text 1' is a jQuery autocomplete as well as 'Text 3', 'Text 2' is just an normal textbox. as per below screenshot.
quest:
The behavior I'm trying to achieve is that after selection in the last textbox (the 'Text 3', which is a jQuery autocomplete) that the focus shifts back to the 'Text 2' textbox on [TAB]
press, the behavior should be similar to pressing [SHIFT] + [TAB]
upon selection in the list of the autocomplete.
problem:
This works 'sort of' on 'Text 1' primarily because focus would move to 'Text2' anyway. To move correctly on [Enter]
I have captured the event.keypress==13
on the select event of the autocomplete.
In 'Text 1' the top value gets selected and focus shifts to 'Text 2' if I press either [Enter]
or [TAB]
which is the correct behavior.
$("#Text1").autocomplete({
source: someArray,
autoFocus: true,
delay: 50,
select: function (event, ui) {
$('#Text1').data('someid', ui.item.uKey);
//Ensure move to next field on [Enter]
if (event.keyCode == 13) {
$('#Text2').focus();
}
},
close: function (event, ui) {
}
});
This capturing does not seem to work in case of the TAB
key.
If I amend the select
event of the autocomplete I can capture the keypress event, but if I request the same behavior it doesn't work.
...
//amended select statement
select: function (event, ui) {
$('#Text1').data('someid', ui.item.uKey);
//Try capture [TAB] and move to next field on [TAB] keypress ** doesn't work ! **
if (event.keyCode == 9) {
$('#Text2').focus(); //focus doesn't move, though Text1 loses it...
}
//Ensure move to next field on [Enter]
if (event.keyCode == 13) {
$('#Text2').focus();
}
},
If I try to control the behavior of the [TAB]
key on the keypress event of the 'Text 3' textbox I get no control whatsoever. On [Enter]
no problems, correct redirection, but not on [TAB]
.
I've tried capturing the keypress event on the textbox (outside the autocomplete) this does capture the keypress event but also doesn't move the focus to 'Text 2'.
I've tried event.preventDefault();
and stopPropagation();
on the [TAB]
press event of 'Text 3' but that indeed just stops any propagation, moreover; the autocomplete will not select if you do that...
$('#Text3').keypress(function(event){
if (event.keyCode==9){
event.preventDefault();
event.stopPropagation();
$('#Text2').focus();
}
});
So, how to select the top item AND redirect focus to any desired field on the autocomplete on [TAB]
press event ?