I'm given a task to create a series of span text elements, that'd allow me to provide tabbing operations as I'm traversing through the html document.
In my solution, I have a few ajax updates, and there are certain html elements that can be editable and other that are not. However, I removed those kinds of details in the example I am providing.
So the operation mode is that when I click on a span element, it changes to an input box. What I want is when I hit the TAB key, it should go to the next element span with the class "test", switching the next element into a input box and changing the old input box to a span.
However, I also want the operation that whenever I'm on any input box, that it will automatically switch me to a span, without any traversing.
The problem I am facing is that I can either get one or the other to work, but not both.
- When I set the blurring functionality to work. I can swap the span element to be an input, and when I focus out of it, it returns to normal, but tabbing doesn't work.
- When I get the tabbing functionality to work, I can tab through a series of span elements, but when I try to focus out of an input by clicking on the body document, it doesn't change the input box back to a span.
The underlying problem is because both operations triggers the focusout
event. But when I tab, it does the keydown
event first, then it triggers the focusout
event.
I'm attaching a jsfiddle here: http://jsfiddle.net/QcGag/1/
Notice in the code, I used a canTab
flag. If you leave the code the way it is, it can tab through correctly. So click on Test 1 and keep hitting the tab key. It will skip over "Test 3". Now, remove //
before the cellElem.canTab = false;
then the blur function will work but the tabbing is disabled. I need to get both to work.
I'd accept an advice on design or coding structure.
Here's the latest update to the code: http://jsfiddle.net/QcGag/3/
This actually works in IE 7-9, but not in Google Chrome; the error comes out as:
"Uncaught Error: NOT_FOUND_ERR: DOM Exception 8"
What I did was set the next element to ""
and checked for the next element's length (for existence) in the if statement of canTraverse()
. Note: I changed the name from save()
in the first code sample to canTraverse()
.
posted in jQuery forum: http://bugs.jquery.com/ticket/12505
Posted in Google Chromium: http://code.google.com/p/chromium/issues/detail?id=147759