Question

我有三种方式在表单上输入日期

选择自动填充的今天或明天复选框日期输入分别为今天/明天的日期。
选择输入日期的日期输入。

我想要实现的是，一旦用户通过点击选项卡到达第一个复选框，这是[今天]它被聚焦，现在通过使用向右/向左箭头键我想从一个选项转移到另一个选项

有人可以帮我搞定吗？以下是我所做的草案代码。在此先感谢:)

$('#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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

$('#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>

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

2 个答案: