0
私は自動それぞれ今日/明日の日付で 日付入力を埋め、今日か明日、チェックボックスのどちらかを選択する形変更は
- に入力するには3つの方法の日付を持っています。
- 日付を入力する日付を選択します。
私が達成しようとしているのは、ユーザーが[今日]タブを押すことで最初のチェックボックスに達すると、今度は矢印キーを使って左右に移動したいのですオプションを別のものに設定します。
誰でも私にこの作業を手伝ってもらえますか？ 以下は私が行ったことのドラフトコードです。事前に 感謝:)
$('#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>
[（Tabキーと同様に）、下矢印キーを使用して次の入力をフォーカス（http://stackoverflow.com/questions/12407093/focus-theの可能な重複-next-input-with-down-arrow-with-the-tab-key） – Alfro