1

To improve my jquery skills I am working on an online crossword type game.

I will insert an id, such as d-1 for down 1 or a-5 for across 5 in the appropriate square. I would like to use jquery to set the focus to the next appropriate square after the user types in a letter; for example if they type in foo, starting at the top right, the word FOO would appear going down the right column.

I have spent a long time to accomplish this with no success. Below is some sample code with the id hardcoded (though finding the next across id would probably be different than the next down id)

Thanks for any help.

Jsfiddle

HTML 

    <div class="live-cw-css-table-tr">
        <div class="live-cw-css-table-td" id="a-1"contenteditable></div>
        <div class="live-cw-css-table-td" id="a-1" contenteditable></div>
        <div class="live-cw-css-table-td contenteditable" id="d-1 a-1" contenteditable></div>

    </div>

    <div class="live-cw-css-table-tr">
        <div class="live-cw-css-table-td live-cw-css-nb"></div>
        <div class="live-cw-css-table-td   live-cw-css-nb" id="d-1" contenteditable></div>
        <div class="live-cw-css-table-td  " id="d-1" contenteditable></div>

    </div>


</div>

jquery

$('.live-cw-css-table-td').on('input',function(e){
 if ($(this).text().length > 1) {    
     $(this).next().find('#d-1').focus();
  }
  });
user1763812
  • 437
  • 7
  • 14
  • you cant give two ID's for a single DOM – Amar Singh Feb 01 '16 at 19:55
  • plus you have used same ID for two different element – Amar Singh Feb 01 '16 at 19:56
  • 1
    @user1763812 Update html as Yo Yo mentioned and to focus on perticular div you could directly user `focus()` from jquery by id selector. `$("#id-of-div").focus();` Also refer to this thread on SO http://stackoverflow.com/questions/2388164/set-focus-on-div-contenteditable-element – pratikpawar Feb 01 '16 at 19:58
  • Thanks about the id info. I will update it to d-1-1, d-1-2 and d-1-3 for down 1 letter 1, letter 2, etc. – user1763812 Feb 01 '16 at 20:01

0 Answers0