Question

我已经使用malsup的Form Plugin创建了一个表单，其中提交了输入的更改。我已经设置了我的jQuery脚本来索引下拉菜单和可见输入，并使用该索引来确定tab的keydown是否应该将焦点移动到下一个元素或第一个元素，同样使用shift + tab keydown。但是，不是像我希望的那样将焦点移动到tab keydown上的最后一个元素的第一个元素，而是将焦点移动到第二个元素。如何更改它以将焦点循环到实际的第一个和最后一个元素？这是我的表单的实时链接：http://www.presspound.org/calculator/ajax/sample.php。感谢任何试图提供帮助的人。这是我的剧本：

$(document).ready(function() {
var options = {
    target: '#c_main',
    success: setFocus
};
$('#calculator').live('submit', function() {
    $(this).ajaxSubmit(options);
    return false;
});
$(this).focusin(function(event) {
    var shiftDown = false;
    $('input, select').each(function (i) {
        $(this).data('initial', $(this).val());
    });
    $('input, select').keyup(function(event) {
        if (event.keyCode==16) {
            shiftDown = false;
            $('#shiftCatch').val(shiftDown);
        }
    });
    $('input, select').keydown(function(event) {
        if (event.keyCode==16) {
            shiftDown = true;
            $('#shiftCatch').val(shiftDown);
        }
        if (event.keyCode==13) {
            $('#captured').val(event.target.id);
        } else if (event.keyCode==9 && shiftDown==false) {
            return $(event.target).each(function() {
                var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
                var index = fields.index(this);
                var nextEl = fields.eq(index+1).attr('id');
                var firstEl = fields.eq(0).attr('id');
                var focusEl = '#'+firstEl;
                if (index>-1 && (index+1)<fields.length) {
                    $('#captured').val(nextEl);
                } else if(index+1>=fields.length) {
                    if ($(this).val() != $(this).data('initial')) {
                        $('#captured').val(firstEl);
                    } else {
                        event.preventDefault();
                        $(focusEl).focus();
                    }
                }
                return false;
            });
        } else     if (event.keyCode==9 && shiftDown==true) {
            return $(event.target).each(function() {
                var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
                var index = fields.index(this);
                var prevEl = fields.eq(index-1).attr('id');
                var lastEl = fields.eq(fields.length-1).attr('id');
                var focusEl = '#'+lastEl;
                if (index<fields.length && (index-1)>-1) {
                    $('#captured').val(prevEl);
                } else if (index==0) {
                    if ($(this).val() != $(this).data('initial')) {
                        $('#captured').val(lastEl);
                    } else {
                        event.preventDefault();
                        $(focusEl).select();
                    }
                }
                return false;
            });
        }
    });
});

}）; function setFocus（）{ with（document.calculator） var recap = document.getElementById（recaptured.value）; if（recap！= null）{ setTimeout（function（）{ if（recap.getAttribute（'type'）=='text'）{ recap.select（）; } else { recap.focus（）; } }，100）; } }

编辑＃1 ：我对代码进行了一些小的更改，这让我更接近我预期的脚本功能。但是，我只对与焦点有关的代码进行了一次更改：我试图在按下最后一个元素（以及第一个元素上的shift + tab keydown）时禁用选项卡keydown，试图强制关注我想要的元素，而不像它一直在做的那样跳过它。这是我添加的代码：

$(this).one('keydown', function (event) {
    return !(event.keyCode==9 && shiftDown==true);
});

这种作品。页面加载后，如果用户按下最后一个元素上的选项卡而不更改其值，则焦点将设置为第二个元素。但是，第二次用户按下最后一个元素上的tab而不更改其值，以及之后的每个后续时间，焦点将被设置为第一个元素，就像我希望的那样。

编辑＃2 ：我替换了编辑＃1中的代码，代码使用了event.preventDefault（），效果更好。如果用户在第一个元素中执行shift + tab keydown，则焦点会移动到最后一个元素。但是，如果用户继续按住shift键并再次按Tab键，则焦点将被设置回第一个元素。如果用户继续按住shift键并按下Tab键，焦点将移回最后一个元素。焦点将在第一个和最后一个元素之间来回移动，直到用户抬起换档键。仅按Tab键不会发生此问题。以下是新的代码段：

event.preventDefault();
$(focusEl).focus();

Answer 1

你有很多代码我没有得到完整的概述，所以我不知道我是否错过了你想要集成的功能，但是对于tabbing / shift-tabbing通过表单元素，这应该做的工作：

var elements = $("#container :input:visible");
var n = elements.length;
elements
.keydown(function(event){
    if (event.keyCode == 9) { //if tab
        var currentIndex = elements.index(this);
        var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n;
        var el = elements.eq(newIndex);
        if (el.attr("type") == "text")
            elements.eq(newIndex).select();
        else
            elements.eq(newIndex).focus();
        event.preventDefault();
    }
});

elements将是包含所有输入字段的jQuery对象，在我的示例中，它是div #container内的所有输入字段这是一个演示：http://jsfiddle.net/rA3L9/

Answer 2

这是解决方案，如果没有Simen的帮助，我无法达到这个目标。再次感谢，西门。

$(document).ready(function() {
    var options = {
        target: '#c_main',
        success: setFocus
    };
    $('#calculator').live('submit', function() {
        $(this).ajaxSubmit(options);
        return false;
    });
    $(this).focusin(function(event) {
        $('#calculator :input:visible').each(function (i) {
            $(this).data('initial', $(this).val());
        });
        return $(event.target).each(function() {
            $('#c_main :input:visible').live(($.browser.opera ? 'keypress' : 'keydown'), function(event){
                var elements = $("#calculator :input:visible");
                var n = elements.length;
                var currentIndex = elements.index(this);
                if (event.keyCode == 13) { //if enter
                    var focusElement = elements.eq(currentIndex).attr('id');
                    $('#captured').val(focusElement);
                } else if (event.keyCode == 9) { //if tab
                    var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n;
                    var el = elements.eq(newIndex);
                    var focusElement = el.attr('id');
                    if ($(this).val() != $(this).data('initial')) {
                        $('#captured').val(focusElement);
                    } else if ((currentIndex==0 && event.shiftKey) || (currentIndex==n-1 && !event.shiftKey)) { 
                        event.preventDefault();
                        if (el.attr('type')=='text') {
                            $.browser.msie ? "" : $(window).scrollTop(5000);
                            el.select().delay(800);
                        } else {
                            $.browser.msie ? "" : $(window).scrollTop(-5000);
                            el.focus().delay(800);
                        }
                    } else if (el.is('select')) {
                        event.preventDefault();
                        if (el.attr('type')=='text') {
                            el.select();
                        } else {
                            el.focus();
                        }
                    }
                }
            });
        });
    });
});

function setFocus() {
    with (document.calculator)
    var recap = document.getElementById(recaptured.value);
    if (recap!=null) {
        setTimeout(function() {
            if (recap.getAttribute('type')=='text') {
                recap.select();
            } else {
                recap.focus();
            }
        }, 1     );
    }
}

我可以在我的实时链接中下载我的文件：http://www.presspound.org/calculator/ajax/sample.php

从最后一个元素循环焦点到第一个表单元素＆amp;反之亦然

2 个答案: