I have a page using JQuery and Jeditable to create editable text elements on the page.
While editing an element, I would like to be able to tab from one element to the next.
I am unsure of how to:
Use jeditable or jquery to capture the tab key event (keycode = 9)
Once that event is detected, move focus to the next element and activate it via jeditable
Any help appreciated. Thanks!
I managed to find a way to do it:
$('div.editbox').bind('keydown', function(evt) {
if(evt.keyCode==9) {
$(this).find("input").blur();
var nextBox='';
if ($("div.editbox").index(this) == ($("div.editbox").length-1)) {
nextBox=$("div.editbox:first"); //last box, go to first
} else {
nextBox=$(this).next("div.editbox"); //Next box in line
}
$(nextBox).dblclick(); //Go to assigned next box
return false; //Suppress normal tab
};
});
On a tab, a double click (jeditable is set here to use the dblclick event) is sent to the next box. If it's the last edit box (assigned a unique class, I was having problems with selectors), it goes to the first.
I also used find("input") as I was unable to find another selector that picked the jeditable-created input for blurring.
Not optimal, but it works.
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