i have crossword puzzle , trying move cursor next letter box automatically after typing in letter. can going across not sure down. go across priority #1 , if next box not letter box searches see if can go down. if can't go across or down nothing happens.
here have going across:
$('.crossword_puzzle input[type="text"]').keyup(function() { $(this).parent().parent().next().find('input[type="text"]').focus().select(); }); how go down if across not found?
the dom html table input box in each td.
thanks help.
edit - heres part of table, forgot have set of divs in each td too. there div holding number @ start of each word.
<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"> what this, taking @kevin b answer below , adding flag switch way priority goes. see issue doing way? edit: added logical flip direction priority based on if next cell has text or not in current priority order
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(); });
go next row instead of next 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(); }); 
Comments
Post a Comment