1

次の問題があります。複数のフォームがあるページがあります。いくつかのフォームのデフォルトのタブインデックス設定を変更する必要があります。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 イベントが割り当てられた 2 つの要素を「連続して」持つことについて何かありますか。つまり、property_name と site_contact が HTML で連続して発生します。

4

3 に答える 3

2

.focusout() と .focusin() を試してください。API に記載されている大きな違いは、これらがバブルアップすることですが、私の記憶が正しければ、IE6+ jQuery API でも動作します - focus Out

于 2011-01-05T22:58:28.383 に答える
0

デフォルトの JavaScript 機能を無効にしたいと考えています。コードの後に​​実行されます。

このようなことを試してください。これは疑似コードにすぎませんが、組み込みのデフォルト イベント ハンドラを実行させたくないことを JavaScript に知らせる必要があると思います。

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

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();
        }
});
于 2011-01-06T00:29:45.287 に答える