How to focus text area from one div to another div using arrow key

Question

Here is my div structure and I want to move my cursor from one div to another div using arrow up and down key. Is there any solution?

<div id="InsertDiv">
    <div draggable="true" onclick="openPropDyn(event)" data-serial="6018" ondragstart="drag(event,6018)" class="subtaskDetailDive complete" id="subtaskDetailDive6018">
        <div class="subtaskRow" id="readOnlyID6018">
            <textarea></textarea>
        </div>
    </div>
    <div draggable="true" onclick="openPropDyn(event)" data-serial="6019" ondragstart="drag(event,6019)" class="subtaskDetailDive complete" id="subtaskDetailDive6019">
        <div class="subtaskRow" id="readOnlyID6019">
            <textarea></textarea>
        </div>
    </div>
    <div draggable="true" onclick="openPropDyn(event)" data-serial="6020" ondragstart="drag(event,6020)" class="subtaskDetailDive complete" id="subtaskDetailDive6020">
        <div class="subtaskRow" id="readOnlyID6020">
            <textarea></textarea>
        </div>
    </div>
    <div draggable="true" onclick="openPropDyn(event)" data-serial="6021" ondragstart="drag(event,6021)" class="subtaskDetailDive complete" id="subtaskDetailDive6021">
        <div class="subtaskRow" id="readOnlyID6021">
            <textarea></textarea>
        </div>
    </div>
    <div draggable="true" onclick="openPropDyn(event)" data-serial="6022" ondragstart="drag(event,6022)" class="subtaskDetailDive complete" id="subtaskDetailDive6022">
        <div class="subtaskRow" id="readOnlyID6022">
            <textarea></textarea>
        </div>
    </div>
</div>

Note that if you are overriding arrow keys when the textarea is in focus, you will not be able to use the same keys to navigate the caret within element. — Terry, Aug 03 '17 at 05:36
yes @Taplar. there is a contenteditable div.i want to move one from another using arrow keys. thanks. — Dipok Chakraborty, Aug 03 '17 at 05:43
Possible duplicate of https://stackoverflow.com/questions/12407093/focus-the-next-input-with-down-arrow-key-as-with-the-tab-key — , Aug 03 '17 at 05:45
i need to move from one div to another div not input, i can handle input navigation using event. Thanks @slacker — Dipok Chakraborty, Aug 03 '17 at 05:50
Which one is the contenteditable div? I don't see that in your example. — Taplar, Aug 03 '17 at 05:52
Huh? textareas are already editable... Or you mean the div around the textarea? — Taplar, Aug 03 '17 at 06:01

score 0 · Answer 1 · 2017-08-03T06:03:41.500

$(document).keydown(
  function(e) {
    if (e.keyCode == 40) {
      $(".move:focus").closest('.subtaskDetailDive').next().find('.move').focus();

    }
    if (e.keyCode == 38) {

      $(".move:focus").closest('.subtaskDetailDive').prev().find('.move').focus();

    }
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="InsertDiv">
  <div draggable="true" data-serial="6018" ondragstart="drag(event,6018)" class="subtaskDetailDive complete" id="subtaskDetailDive6018">
    <div class="subtaskRow" id="readOnlyID6018">
      <textarea class='move'></textarea>
    </div>
  </div>
  <div draggable="true" data-serial="6019" ondragstart="drag(event,6019)" class="subtaskDetailDive complete" id="subtaskDetailDive6019">
    <div class="subtaskRow" id="readOnlyID6019">
      <textarea class='move'></textarea>
    </div>
  </div>
  <div draggable="true" data-serial="6020" ondragstart="drag(event,6020)" class="subtaskDetailDive complete" id="subtaskDetailDive6020">
    <div class="subtaskRow" id="readOnlyID6020">
      <textarea class='move'></textarea>
    </div>
  </div>
  <div draggable="true" data-serial="6021" ondragstart="drag(event,6021)" class="subtaskDetailDive complete" id="subtaskDetailDive6021">
    <div class="subtaskRow" id="readOnlyID6021">
      <textarea class='move'></textarea>
    </div>
  </div>
  <div draggable="true" data-serial="6022" ondragstart="drag(event,6022)" class="subtaskDetailDive complete" id="subtaskDetailDive6022">
    <div class="subtaskRow" id="readOnlyID6022">
      <textarea class='move'></textarea>
    </div>
  </div>
</div>

Check this snippet.

Chinmay Dalvi · Answer 2 · 2017-08-03T06:10:53.493

To do this you have to write jQuery code

$('.subtaskRow textarea').on('keyup', function(e) {
    if(e.keyCode == 38){ // Key code for Up key
      $(".subtaskRow textarea:focus").closest('.subtaskDetailDive').prev().find('.subtaskRow textarea').focus();
      console.log("Up key Pressed");
    }      
    else if(e.keyCode == 40){ // Key code for Down key
      $(".subtaskRow textarea:focus").closest('.subtaskDetailDive').next().find('.subtaskRow textarea').focus();
      console.log("Down key Pressed");
    }
});

Refer this js fiddle link for output https://jsfiddle.net/z7kgmpz4/3/

How to focus text area from one div to another div using arrow key

2 Answers2