Не путайте кнопку Next на клавиатуре с клавишей TAB, это не .Следующая кнопка вашей клавиатуры просто ищет следующее поле ввода, которое можно редактировать с помощью клавиатуры, например, текстовое или числовое поле.Он пропустит все остальное, потому что для этого потребуется закрыть клавиатуру и вызвать собственный селектор календаря или комбинированного окна.
Клавиша TAB, если она есть на вашей клавиатуре, работает так, как ожидалось.На некоторых клавиатурах в магазине воспроизведения есть клавиша TAB, например эта .Вы можете скачать и увидеть, что нажатие клавиши TAB фокусирует следующий элемент выбора или элемент ввода даты.
Следующая демонстрация показывает разницу между клавишей TAB и кнопкой Next.Во время навигации по клавише TAB вы можете увидеть, что происходит событие клавиатуры, которое показывает код клавиши TAB 9. Но при использовании клавиши Next событие клавиатуры не срабатывает, как будто браузер даже не знает, что только что произошло.
document.getElementById('my_form').addEventListener('keydown', function(event) {
document.getElementById('response_view').innerHTML = event.keyCode;
})
<form action="" id="my_form">
<div>
Last Key Press Key Code:
<span id="response_view" style="color: red;"></span>
</div>
<div>
<input type="text" name="first_name" id="first_name" size="35" placeholder="Select it by click">
</div>
<div>
<input type="text" name="last_name" id="last_name" size="35" placeholder="Then use TAB/Next key to focus this input">
</div>
<select name="date_day">
<option value="-1">Select Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>
<input type="text" name="address" id="address" size="35" placeholder="address">
</div>
</form>
Единственный способ решить эту проблему, который я считаю нужным, - использовать JavaScript для отслеживания входных элементов в фокусе, чтобы определить, была ли нажата клавиша Next ипропустил элемент выбора, затем сфокусировал его на JavaScript.
(function(){
let editableElementsSelector = 'input[type=text],input[type=email],input[type=number]';
let nonEditableElementsSelector = 'select,input[type=date],input[type=time]';
let userClickDetected = false, userTouchDetected = false;
// Kepps track of user click for 0.5 seconds
window.addEventListener('click', function() {
userClickDetected = true;
setTimeout(()=>{userClickDetected = false;}, 500);
});
// Kepps track of user touch for 0.5 seconds
window.addEventListener('touchstart', function() {
userTouchDetected = true;
setTimeout(()=>{userTouchDetected = false;}, 500);
});
document.querySelectorAll('form[next-button-fix]').forEach(function(form){
let formElements = form.elements;
let editableElements = form.querySelectorAll(editableElementsSelector);
let nonEditableElements = form.querySelectorAll(nonEditableElementsSelector);
// linking elements
for(let i=1; i<formElements.length; i++){
formElements[i].previousFormElement = formElements[i-1];
formElements[i-1].nextFormElement = formElements[i];
}
// Focuses next element on Next button click
editableElements.forEach(function(element){
element.addEventListener('blur', function(event){
if(!userClickDetected && !userTouchDetected){
if(element.nextFormElement && event.relatedTarget != element.nextFormElement){
element.nextFormElement.focus();
}
}
});
});
// Focuses next element on select element change
nonEditableElements.forEach(function(element){
element.addEventListener('change', function(event){
if(element.nextFormElement){
element.nextFormElement.focus();
}
});
});
});
})();