Question

我在下面有一个html表结构：

<table>     
    <tr><td>ABC</td></tr>
    <tr>
        <td><input class="inp"/></td>
        <td><input class="inp"/></td>
    </tr>
    <tr><td><input class="inp"/></td></tr>
    <tr><td><input class="inp"/></td></tr>
</table>
<button id="btn">Click me</button>

然后我的目的是让焦点总是通过按钮点击进入下一个“inp”类的输入字段。这是我的剧本：

var focused = null;
$(".inp").focus(function () {
    focused = $(this);
}).first().focus();

$("#btn").click(function(e){
     if (focused && focused.length) { 
        //this only works horizontally. 
        focused.parent().next().find(".inp").focus();

        // this only works vertically. 
        //focused.closest("tr").next().find(".inp").focus();
     }
});

我想将第二行的焦点放在第一行的最后一个元素之后。我如何结合这两个陈述？

Answer 1

试试这个：

<强> HTML

<table>
<tr>
    <td>ABC</td>
</tr>
<tr>
    <td>
        <input class="inp" />
    </td>
    <td>
        <input class="inp" />
    </td>
</tr>
<tr>
    <td>
        <input class="inp" />
    </td>
</tr>
<tr>
    <td>
        <input class="inp" />
    </td>
</tr>
</table>
<button id="btn">Click me</button>

<强> JS

// initial just focus on first input
$('.inp').first().focus();
// get all input
var all = $('.inp');
// get first input index and add one number for next focus
var index = (all.index(all.first()) + 1);

$('#btn').click(function () {
  // if length of input same with current index
  // defined into 0, (goes bact to first input)
  // if does't wanna go back just remove this line
  if (index == all.length) index = 0;
  // focus next input
  all.eq(index).focus();
  index++;
});

<强> DEMO

Answer 2

这段代码似乎有点讨厌，但它会为你完成这项工作：D

$(document).ready(function() {

 var focused = null;

 $(".inp").focus(function() {
     focused = $(this);
 }).first().focus();

 $("#btn").click(function(e) {
     if (focused && focused.length) {

         if ($(focused).closest('tr').find('td').length > 1 && $(focused).closest('td').next().length != 0) {

             $(focused).closest('td').next().find('.inp').focus();
         } else {

             $(focused).closest('tr').next().find('.inp').focus();

         }

     }
 });

});

这是Plunker：http://plnkr.co/edit/Nm3wETpltRo6i7mAXPtj?p=preview

Answer 3

我有一个小提琴，即跳到索引，直到你到达最后一个。如果你想要你可以修改它也可以倒退。

http://jsfiddle.net/gyebua9e/

$('.inp').first().focus();

var index   = 0;
var $inputs = $('.inp').length;

$('#btn').click(function() {
   index += 1;
   $('.inp').eq(index).focus();
});

Answer 4

您可以在所有输入元素的包装集上使用JQuery .index()和.eq()函数来完成此操作。

当焦点位于最后一个输入并且单击该按钮时，会将焦点移回第一个输入。

$(function() {
    var $inputs = $('.inp');

    var index = null;

    $inputs.focus(function() {
        index = $inputs.index($(this));
    });

    $inputs.first().focus();

    $('#btn').click(function(e) {
         if (index != null) {
             index = (index + 1) % $inputs.length;
             $inputs.eq(index).focus();
         }
    });
});

jsfiddle

此版本不会将焦点包装回第一个输入。

$('#btn').click(function(e) {
     if (index != null) {
         if ((index + 1) < $inputs.length) {
             $inputs.eq(index + 1).focus();
         }
     }
});

jsfiddle

Answer 5

对不起，这有点令人困惑，你想通过点击输入字段之间的跳转来实现什么？

你是不是只想尝试总是转到下一个输入，无论包装是什么？所以如果我点击第二个输入它会转到第三个输入，如果我点击第一个输入它转到第二个输入？等

如何遍历和元素之间？

5 个答案: