1

我有以下问题。我有一个页面上有多个表格。我需要修改一些表单的默认 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>

我的查询：

$('#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 中连续出现。

4

3 回答 3

2

你应该试试 .focusout() 和 .focusin()。API 中提到的最大区别是这些冒泡，但如果我没记错的话，它们也可以在 IE6+ jQuery API 中工作 - 关注

于 2011-01-05T22:58:28.383 回答
0

我会使用 keydown 事件来捕捉按下 tab 键的时间。

$('#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();
        }
});
于 2011-01-06T00:29:45.287 回答
0

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

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

.blur(function() { //your code here; return false});
于 2011-01-05T21:31:12.230 回答