Internet Explorer ignores javascript onblur() and focus() commands

I have the following problem. I have a page with multiple forms on it. I need to modify the default tabindex settings of a few of the forms. If I use the tabindex HTML attribute then it breaks the "working" forms, so I'm using JQuery to catch blur() events and set focus() to the correct input elements.

My HTML:

<table>
            <tr>
                <td&g开发者_如何学编程t;Property Name: </td>
                <td><input type="text" class="Text" id="property_name" name="property_name" /></td>
                <td width="50">&nbsp;</td>
                <td>Site Contact: </td>
                <td valign="top" rowspan="3">
                    <textarea class="Default" id="site_contact" name="site_contact"></textarea>
                </td>
            </tr>
            <tr>
                <td>Address: </td>
                <td>
                    <input type="text" class="Text" id="property_address" name="property_address" />
                </td>
            </tr>
            <tr>
                <td>City: </td>
                <td>
                    <input type="text" class="ShortText" id="property_city" name="property_city" />
                </td>
            </tr>
            <tr>
                <td>State: </td>
                <td>
                    <input type="text" class="ShortText" id="property_state" name="property_state" />
                </td>
                <td width="50">&nbsp;</td>
                <td>Comments: </td>
                <td valign="top" rowspan="3">
                    <textarea class="Default" id="property_comments" name="property_comments"></textarea>
                </td>
            </tr>
            <tr>
                <td>Zip: </td>
                <td>
                    <input type="text" class="ShortText" id="property_zip" name="property_zip" />
                </td>
            </tr>
            <tr>
                <td>Description: </td>
                <td><?php Utilities::showPropertyDescriptionDdl('property_description', 'property_description'); ?></td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" class="submit" value="Save" id="SaveProperty" /> &nbsp;
                    <input type="button" class="simplemodal-close" value="Cancel" id="CancelProperty" />
                </td>
            </tr>
        </table>

My JQuery:

$('#PropertyForm [name=property_name]').blur( function() { $('#PropertyForm [name=property_address]').focus(); });
$('#PropertyForm [name=property_address]').blur( function() { $('#PropertyForm [name=property_city]').focus(); });
$('#PropertyForm [name=property_city]').blur( function() { $('#PropertyForm [name=property_state]').focus(); });
$('#PropertyForm [name=property_state]').blur( function() { $('#PropertyForm [name=property_zip]').focus(); });
$('#PropertyForm [name=property_zip]').blur( function() { $('#PropertyForm [name=property_description]').focus(); });
$('#PropertyForm [name=property_description]').blur( function() { $('#PropertyForm [name=site_contact]').focus(); });
$('#PropertyForm [name=site_contact]').blur( function() { $('#PropertyForm [name=property_comments]').focus(); });

What should be happening: When the property_name element loses focus, the property_address element should gain.

What is happening: When the property_name element loses focus, the site_contact element gains focus then immediate forwards the focus on to the property_comments element.

This is happening in Internet Explorer 7 and 8. In FireFox everything works as expected. Is there something about having two elements "in a row" that have onblur events assigned, ie property_name and site_contact occur consecutively in the HTML.

You should try .focusout() and .focusin(). The big difference as noted in the API is that these bubble up, but if I remember right, they also work in IE6+ jQuery API - focus Out

I think you want to disable the default javascript functionality. Which is going to execute after your code.

try something like this. This is only pseudo code, but I think you need to let javascript know that you do not want it to execute its built-in default event handlers.

.blur(function() { //your code here; return false});

I would use the keydown event to catch when the tab key is pressed.

$('#PropertyForm [name=property_name]').keydown( 
    function(e) { 
        if (!e.shiftKey && e.keyCode == 9) {
            $('#PropertyForm [name=property_address]').focus();
            e.preventDefault();
        }
});
$('#PropertyForm [name=property_address]').keydown( 
    function(e) { 
        if (!e.shiftKey && e.keyCode == 9) {
            $('#PropertyForm [name=property_city]').focus();
            e.preventDefault();
        }
});