Переход от одного входа к другому с помощью клавиш со стрелками

У меня есть три способа ввода даты в формеПереход от одного входа к другому с помощью клавиш со стрелками

Выбор сегодня или завтра флажок, который автоматически заполняет вход даты с сегодня/завтра датой соответственно.
Выберите дату ввода для ввода даты.

То, что я пытаюсь достичь, - это когда пользователь достигает первого флажка, нажимая вкладку, которая [сегодня] фокусируется, теперь с помощью клавиш со стрелками вправо/влево. Я хотел бы перейти от одного вариант другому.

Может ли кто-нибудь помочь мне получить эту работу? Ниже приведен код проекта, который я сделал. Заранее спасибо :)

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

источник

2017-01-27 Joystan Fernandes

Возможный дубликат [Фокус на следующий вход с клавишу со стрелкой вниз (как с помощью клавиши табуляции)] (http://stackoverflow.com/questions/12407093/focus-the -next-input-with-down-arrow-key-as-with-the-tab-key) – Alfro

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

источник

2017-01-27 16:35:05

Если есть введенный выше даты, и я могу перейти к сегодняшней опции даты, нажав вкладку, этот код не работает. Как и те тесты, которые я сделал здесь [https://jsfiddle.net/rc1cw7c4/2/](https://jsfiddle.net/rc1cw7c4/2/) –

@JoystanFernandes Я добавил текстовое поле над двумя кнопками и это выглядит отлично для меня. Не могли бы вы подтвердить? –

Лучше пусть браузер позаботится об этом за вас, но вам нужно сделать несколько изменений:

Вы хотите один выбор можно выбрать, поэтому вход 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>

источник

2017-01-27 16:39:57 Lian

Переход от одного входа к другому с помощью клавиш со стрелками

ответ

Смежные вопросы