Question

这是我的div结构，我想使用向上和向下箭头键将光标从一个div移动到另一个div。有没有解决方案？

<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>

Answer 1

＆＃13;

$(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();

    }
  }
);

＆＃13;

<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>

＆＃13;

检查此代码段。

Answer 2

要做到这一点，你必须编写jQuery代码

$('.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");
    }
});

请参阅此js小提琴链接以获取输出 https://jsfiddle.net/z7kgmpz4/3/

如何使用箭头键将文本区域从一个div聚焦到另一个div

2 个答案: