Question

我有以下问题。我有一个页面上有多个表格。我需要修改一些表单的默认tabindex设置。如果我使用tabindex HTML属性，那么它会打破“工作”形式，所以我使用JQuery捕获blur（）事件并将focus（）设置为正确的输入元素。

我的HTML：

<table>
            <tr>
                <td>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>

我的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(); });

应该发生什么：当property_name元素失去焦点时，property_address元素应该获得。

发生了什么：当property_name元素失去焦点时，site_contact元素获得焦点，然后立即将焦点转移到property_comments元素。

这在Internet Explorer 7和8中发生。在FireFox中，一切都按预期工作。是否有一些“连续”分配了onblur事件的元素，即property_name和site_contact在HTML中连续出现。

Answer 1

你应该尝试.focusout（）和.focusin（）。 API中提到的最大区别在于它们会冒泡，但如果我没记错的话，它们也适用于IE6 + jQuery API - focus Out

Answer 2

我认为您要禁用默认的javascript功能。在您的代码之后将执行哪个。

尝试这样的事情。这只是伪代码，但我认为您需要让javascript知道您不希望它执行其内置的默认事件处理程序。

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

Answer 3

我会在按下Tab键时使用keydown事件来捕获。

$('#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();
        }
});

Internet Explorer忽略javascript onblur（）和focus（）命令

3 个答案: