Question

想象一下这个简单的布局（http://jsfiddle.net/4F9cL/）。我们有一个表，每行我都有一个标签文本框和一个复选框。第一个文本框有tabindex = 1，第一个复选框有tabindex = 2，第二行的下一个文本框有tabindex = 3，依此类推。

我想要做的是更改文本框内容的同一行复选框上的tabindex，如果文本框的内容已更改。

例如，目前我正在检查已更改thebox内容的行上的复选框，我使用以下代码执行此操作：

 $("input:text").change(function () {
            $(this).parents('tr:first').find('input:checkbox').prop('checked', 'checked');

所以场景如下：如果文本框的内容没有改变，当我选项卡时，我希望焦点更改为同一行上的复选框。如果文本框的内容已更改，我希望焦点位于同一行复选框的INSTEAD下面行上的下一个文本框中。

我希望我解释它足以让你明白我想做什么。我尝试过使用.removeprop（）和.removeattr（），但这不起作用，当下一个标签点击它时，它就会转到页面底部。

Answer 1

$("input:text").change(...);

文本框的change事件只会在文本框失去焦点后执行。这意味着，当您按Tab键时，该功能尚未运行，您将最终得到旧的tabindex目标。

$("input:text").keyup(...);
$("input:text").keydown(...);

当您按下文件框时，按下（keydown）或释放（键盘）按钮时会触发这些事件。

这样的事情可以解决问题：

$("input:text").keyup(function() {
    var textBox = $(this);
    var textBoxIsEmpty = textBox.val().length == 0; //I assume you use this to determine which element should be the next to get focused when pressing tab.

    var currentTabIndex = parseInt( textBox.attr("tabindex") );

    var nextTarget = GetNextTarget(textBoxIsEmpty); //not sure how you define this. This is the item you want to be your next target when you press tab.
    var nextTabIndex = currentTabIndex + 1;

    nextTarget.attr("tabindex", nextTabIndex);
});

虽然我不能100％确定是否在每个浏览器中动态更改tabindex。

Answer 2

我已经尝试过这样，它对我来说很好。在应用此之前，您应该清楚这一点，您已在输入中正确声明了tabindex。

jQuery("input:text").keyup(function() {    
  currentTabIndex = parseInt(jQuery(this).attr("tabindex") );
  nextTabIndex = currentTabIndex + 1;
  jQuery('input[tabindex='+nextTabIndex+']').select();
});

在jquery中动态更改tabindex

2 个答案: