2

我有一个填字游戏，并试图在输入字母后自动将光标移动到下一个字母框。我可以做到这一点，但不确定下来。我想作为优先级 #1 过去，如果下一个框不是信箱，它会搜索以查看它是否可以关闭。如果它不能跨越或下降，那么什么也不会发生。

这是我所经历的：

$('.crossword_puzzle input[type="text"]').keyup(function() {
   $(this).parent().parent().next().find('input[type="text"]').focus().select();
});

如果没有找到交叉，我怎么能下去？

DOM 是一个 html 表格，每个 TD 中都有一个输入框。

谢谢你的帮助。

编辑 - Heres 是表格的一部分，忘了我在每个 td 中也有一组 div。还有一个 div 在每个单词的开头都有一个数字。

    <table class="crossword_puzzle">
<tr>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="block_num">1</div>
         <input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x3y1" name="x3y1" value=""/>
         <div class="block_num">1</div>
      </div>
   </td>
   <td>
      <div class="all_blocks"><input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x4y1" name="x4y1" value=""/></div>
   </td>
   <td>
      <div class="all_blocks">
         <input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x5y1" name="x5y1" value=""/>
         <div class="block_num">2</div>
      </div>
   </td>
   <td>
      <div class="all_blocks"><input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x6y1" name="x6y1" value=""/></div>
   </td>
   <td>
      <div class="all_blocks"><input type="text" class="word_3_1 cp_move_across" maxlength="1" onClick="this.select();" id="x7y1" name="x7y1" value=""/></div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
</tr>
<tr>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks"><input type="text" class="word_3_1 cp_move_down" maxlength="1" onClick="this.select();" id="x3y2" name="x3y2" value=""/></div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks"><input type="text" class="word_5_1 cp_move_down" maxlength="1" onClick="this.select();" id="x5y2" name="x5y2" value=""/></div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">
         <div class="black_block"></div>
      </div>
   </td>
   <td>
      <div class="all_blocks">

怎么样，在下面回答@Kevin B 并添加一个标志来切换优先级。有没有人看到这样做的问题？编辑：根据下一个单元格是否具有当前优先级顺序中的文本，为翻转方向优先级添加逻辑

var priority_direction = 'across';
    $('.crossword_puzzle input[type="text"]').keyup(function() {
        if(priority_direction == 'across'){
            var next = $(this).closest('td').next().find('input[type="text"]');
            priority_direction = 'across';
            if (!next.length || next.val().length == 1) {
                var cellIndex = $(this).closest('td').index();
                next = $(this).closest('tr').next().children().eq(cellIndex).find('input[type="text"]');
                priority_direction = 'down';
            }
        } else {
            var cellIndex = $(this).closest('td').index();
            var next = $(this).closest('tr').next().children().eq(cellIndex).find('input[type="text"]');

            priority_direction = 'down';
            if (!next.length || next.val().length == 1) {
                next = $(this).closest('td').next().find('input[type="text"]');
                priority_direction = 'across';
            }
        }
        next.focus().select();
    });
4

2 回答 2

4

转到下一行而不是下一个 td。

$('.crossword_puzzle input[type="text"]').keyup(function() {
   var next = $(this).closest('td').next().find('input[type="text"]');
   if (!next.length) {
      var cellIndex = $(this).closest('td').index();
      next = $(this).closest('tr').next().children().eq(cellIndex).find('input[type="text"]');
   }
   next.focus().select();
});
于 2013-03-26T21:47:26.943 回答
1

You might consider adding classes to each cell (eg. <td class="r5 c16"></td>) to ease navigation between them. Your code could look a lot cleaner and the jQuery selectors will be more efficient.

于 2013-03-26T21:51:37.520 回答