0

以下の 2 つのスクリプトを 1 つに結合して、フォームの入力/選択フィールドのタブインデックス順序機能を生成するスクリプトを取得する方法 (1、7、3 はフィールドの ID (#) です)。

$(function(){
var tabindex = 1;
$('input,select').each(function() {
    if (this.type != "hidden") {
        var $input = $(this);
        $input.attr("tabindex", tabindex);
        tabindex++;
    }
});
});


$(function () {
var tab_order_positions = [1, 7, 3],
tab_order = 0;
for (var i = 0, _len = tab_order_positions.length; i < _len; i++) {
    $('#input_' + tab_order_positions[i]).attr('tabindex', ++tab_order);
}
});
4

1 に答える 1

0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var tab_order_positions = ['1', '7', '3']
            var tabindex = tab_order_positions.length;

            $.each(tab_order_positions, function (i, tab_order_position) {
                $('#input_' + tab_order_position).attr('tabindex', i);
            });

            $('input, select').each(function (i) {
                var obj = $(this);

                if (obj.attr('type') != 'hidden' && (obj.attr('id') !== undefined && $.inArray(obj.attr('id').split('_')[1], tab_order_positions)) === false) {
                    obj.attr('tabindex', tabindex);
                    tabindex++;
                }
            });
        });
    </script>
</head>
<body>
    Name:<input type="text" id="input_1" /><br />
    <input type="hidden" /><br />
    <input type="hidden" /><br />
    Age:
    <input type="text" id="input_3" /><br />
    Birth:
    <input type="text" /><br />
    Test:<select>
        <option>a</option>
        <option>b</option>
    </select><br />
    Gender:
    <input type="radio" name="gender" />
    Male
    <input type="radio" name="gender" />Female
    <br />
    Vechical:
    <input type="checkbox" name="Vechical" /><br />
    <input type="checkbox" name="Vechical" /><br />
    <input type="checkbox" name="Vechical" /><br />
    <input type="hidden" />
    test1:
    <input type="text" id="input_7" /><br />
    test2:
    <input type="text" /><br />
    test3:
    <input type="text" /><br />
    test4:
    <input type="text" /><br />
</body>
</html>
于 2012-04-26T09:58:43.803 に答える