Issues with using onBlur event

Question

I have taken a look around stackoverflow on the topic of onblur but so far have not been able to locate an approach to solve what I want to do.

What I have is a simple two column tables with an unknown number of rows. Rows are created at render time based on the number of boxes being shipped. Each column has the following name and id for the input box:

For column 1: shipItems[ rowNum ].barcode For column 2: shipItems[ rowNum ].trackingcode

Pretty straight forward. What I want to do is validate the trackingcode and if in error alert the user and re-focus the cursor on the column/row that caused the problem. Users will be using a scanner to scan in the information.

Every things works except that I can not get the cursor to go back to the column/input that caused the issue in the onBlur event.

My understanding is that when the onBlur event fires the element is losing focus and thus the focus is being transferred to the new/next element.

I have tried to playing around with the onfocus event, onkeypress events but still have not been successful.

I am open to any ideal to get this done, I have spend way to much time on it as it is. JQuery is not out of the questions or just plan old javascript.

---

UPDATE

Here is a link to the script on jsFiddle:

Answer 1

After reviewing your code, best I can tell you are experiencing an unusual bug in jQuery. I have seen some quirky things happen when using focus() (like having to use setTimeout). But, in your case the $(this) is somehow not resolving correctly when calling focus().

At first I thought it was because the id is not following HTML-4 standards, but correcting the id did not help. $(this) still failed to focus, despite the fact it correctly refers to the <input> element. Then I tried identifying the id with jQuery as a string $("'#" + thisId + "'")...still did not work. But, a hard coded id did work...

So, here's how I modified your code and worked around the problem to get it to focus

if( null === $text.match(/\b(1Z ?[0-9A-Z]{3} ?[0-9A-Z]{3} ?[0-9A-Z]{2} ?[0-9A-Z]{4} ?[0-9A-Z]{3} ?[0-9A-Z]|[\dT]\d\d\d ?\d\d\d\d ?\d\d\d)\b/))
{
    alert("No Match");    
    //$(this).focus();//don't use jquery $this
    var thisId = $(this).attr('id');//get the id
    //use the setTimeout workaround for firefox
    setTimeout(function() {
      document.getElementById(thisId).focus();//use javascript to set focus
    },0);
    $(this).css('background-color','Red');
}

Feel free to look at the fiddle (linked above). This approach does correct the focus problem.

Answer 2

I figured out the issue. It turns out that IE and FireFox have very different behavior when it comes to onBlur.

I was calling focus() during the execution of the blur(). since the blur has not completed it either ignored the focus command or executes and then completes the blur.

Some browsers the focus command can cause a blur to be triggered thus creating an infinite loop with the cursor bouncing between the two fields.

Using a timeout will cause the focus to trigger outside of the blur call back function.

Under IE I can make use of onBlur and have no issues, under FF the focus never got called event with a timeout, so it needs an onChange.

I have updated my script - it runs fine on IE - http://jsfiddle.net/boyd4715/3wbtQ/34/