使用箭头键从一个输入更改为另一个

Question

我有三种方法可以在表单上输入日期

1. 选择今天或明天自动填充的复选框 日期输入分别与今天/明天的日期。
2. 选择日期输入即可输入日期。

我想要实现的是，一旦用户通过点击 [今天] 它获得焦点的选项卡到达第一个复选框，现在通过使用右/左箭头键我想从一个选项切换到另一个.

谁能帮我搞定这个工作？ 下面是我所做的代码草案。 在此先感谢:)

$('#today_label').focus(function() {
  $(document).keydown(function(e) {
    if (e.keyCode == 39) {
      $(".move").next().focus();
    }
    if (e.keyCode == 37) {
      $(".move").prev().focus();
    }
  });
})

.date-row {
  width: 100%;
  float: left;
}

.duedate-row {
  float: left;
  width: 50%;
}

.duedate-row input[type="text"] {
  width: 87%;
  font-family: 'Helvetica';
  font-size: 14px;
}

.duedate-row a img {
  vertical-align: middle;
}

.quick-date-container {
  width: 50%;
  float: left;
}

.quick-date-container .middle-column {
  padding-bottom: 8px;
}

.quick-date-container input {
  position: absolute;
  left: -9999px;
}

.quick-date-container label {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #6A67CE;
  border-radius: 100px;
  color: #6A67CE;
  background-color: transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
}

.quick-date-container label:hover,
.quick-date-container label:focus {
  color: #fff;
  background-color: #6A67CE;
  outline: 0
}

.quick-date-container input:checked + label {
  background-color: #6A67CE;
  color: #fff;
}

.quick-date-container input:checked + label::before {
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="date-row">
  <div class="quick-date-container">
    <input id="today" type="checkbox" tabindex="-1">
    <label for="today" id="today_label" class="move" tabindex="0">Today</label>

    <input id="tomorrow" type="checkbox" tabindex="-1">
    <label for="tomorrow" id="tomorrow_label" class="move">Tomorrow</label>
  </div>
  <div class="duedate-row">
    <input type="text" id="due_on" tabindex="-1" placeholder="Due Date" name="duedate" class="icon-duedate">
    <a href="#" title="Click to add date" class="move datepicker-trigger">        
      <img src="images/due_date.png" alt="">
    </a>
  </div>
</div>

Answer 1

最好让浏览器为您处理这个问题，但您需要进行一些更改：

1. 您希望选择一个选项，因此radio类型输入比复选框更合适。
2. 为每个输入适当地添加名称和值属性。
3. 您想选择第一个焦点选项。

$('#today').on('focus', function () {
  $(this).attr('checked', 'checked');
});

.date-row {
  width: 100%;
  float: left;
}

.duedate-row {
  float: left;
  width: 50%;
}

.duedate-row input[type="text"] {
  width: 87%;
  font-family: 'Helvetica';
  font-size: 14px;
}

.duedate-row a img {
  vertical-align: middle;
}

.quick-date-container {
  width: 50%;
  float: left;
}

.quick-date-container .middle-column {
  padding-bottom: 8px;
}

.quick-date-container input {
  position: absolute;
  left: -9999px;
}

.quick-date-container label {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #6A67CE;
  border-radius: 100px;
  color: #6A67CE;
  background-color: transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
}

.quick-date-container label:hover,
.quick-date-container label:focus {
  color: #fff;
  background-color: #6A67CE;
  outline: 0
}

.quick-date-container input:checked + label {
  background-color: #6A67CE;
  color: #fff;
}

.quick-date-container input:checked + label::before {
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="date-row">
  <div class="quick-date-container">
    <input id="today" type="radio" tabindex="2" name="mydate" value="today">
    <label for="today" id="today_label" class="" tabindex="0">Today</label>

    <input id="tomorrow" type="radio" tabindex="2" name="mydate" value="tomorrow">
    <label for="tomorrow" id="tomorrow_label" class="">Tomorrow</label> 
  </div>
  <div class="duedate-row">
    <input type="text" id="due_on" tabindex="3" placeholder="Due Date" name="duedate" class="icon-duedate">
    <a href="#" title="Click to add date" class="move datepicker-trigger">        
      <img src="images/due_date.png" alt="">
    </a>
  </div>
</div>

Answer 2

$(function(){

  $( document ).keydown( function(e) {    
    
    // for left arrow
    if (e.keyCode == 37) {
      
      if( $("#tomorrow").is(':focus') ){ // if tomorrow element is focused only
        
        $("#tomorrow").prop('checked', false); // uncheck tomorrow
        $("#today").prop('checked', true).focus(); // check tomorrow        
      }
    }
    
    // for right arrow
    if (e.keyCode == 39) {
    
      if( $("#today").is(':focus') ){ // if today element is focused only
         
        $("#today").prop('checked', false); // uncheck today
        $("#tomorrow").prop('checked', true).focus(); // check tomorrow
      }
    }
    
  } );
} );

.date-row {
  width: 100%;
  float: left;
}

.duedate-row {
  float: left;
  width: 50%;
}

.duedate-row input[type="text"] {
  width: 87%;
  font-family: 'Helvetica';
  font-size: 14px;
}

.duedate-row a img {
  vertical-align: middle;
}

.quick-date-container {
  width: 50%;
  float: left;
}

.quick-date-container .middle-column {
  padding-bottom: 8px;
}

.quick-date-container input {
  position: absolute;
  left: -9999px;
}

.quick-date-container label {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #6A67CE;
  border-radius: 100px;
  color: #6A67CE;
  background-color: transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
}

.quick-date-container label:hover,
.quick-date-container label:focus {
  color: #fff;
  background-color: #6A67CE;
  outline: 0
}

.quick-date-container input:checked + label {
  background-color: #6A67CE;
  color: #fff;
}

.quick-date-container input:checked + label::before {
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input type="text" placeholder="Due Date">
<div class="date-row">
  <div class="quick-date-container">
    <input id="today" type="checkbox" tabindex="-1">
    <label for="today" id="today_label" class="move" tabindex="0">Today</label>

    <input id="tomorrow" type="checkbox" tabindex="-1">
    <label for="tomorrow" id="tomorrow_label" class="move">Tomorrow</label>
  </div>
  <div class="duedate-row">
    <input type="text" id="due_on" tabindex="-1" placeholder="Due Date" name="duedate" class="icon-duedate">
    <a href="#" title="Click to add date" class="move datepicker-trigger">        
      <img src="images/due_date.png" alt="">
    </a>
  </div>
</div>