javascript - 当我从我的 android 设备中选择下一个时,在填写表格时,它会跳过任何下拉菜单
问题描述
我有一个由输入文本框、下拉菜单和提交按钮组成的网络表单。
当我在 android 手机 - chrome 浏览器(或我的 android 设备上的任何浏览器)上使用我的网站时,我正在使用手机键盘上的 next 导航到下一个字段。
我的表单上的字段序列:
- 名字(文本输入)
- 姓氏(文本输入)
- 天(下拉)
- 月(下拉)
- 年(下拉)
- 地址(文本) 邮编(文本)
- 提交(按钮)
我的 android 键盘上的 Next 按钮可以很好地从名字导航到姓氏。但是,当我在输入完姓氏后选择下一步时,它会直接将我带到地址字段。它跳过下拉字段。
选项卡在桌面和 Apple 设备上运行良好。这只是安卓设备的问题。
我应该做一些专门为android浏览器处理的事情吗?
解决方案
不要将键盘的 Next 按钮与 TAB 键混淆,它不是. 键盘的下一个按钮只是查找下一个可由键盘编辑的输入字段,例如文本或数字字段。它将跳过其他所有内容,因为这将需要关闭键盘并调出本机日历或组合框选择器。
如果您的键盘中存在 TAB 键,则按预期工作。Play-store 上的一些键盘有一个 TAB 键,比如这个。您可以下载并查看按 TAB 键确实会聚焦下一个选择元素或日期输入元素。
下面的演示展示了 TAB 键和 Next 按钮的区别。您可以看到,在使用 TAB 键导航时,会触发键盘事件,这会显示 TAB keyCode 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();
}
});
});
});
})();
推荐阅读
- python - Python:如何解决基本“混沌理论”程序中的舍入错误?
- architecture - 对监控结果有什么建议吗?用于使用数据存储器实现的存储和加载指令
- reactjs - 如何过滤或排序 reactjs 中的最新帖子
- php - 多个复选框值未存储到 php 中的数据库中,使用 foreach 显示为空
- ios - 点击标记时如何更新谷歌地图标记图像
- python - 如何从机器人创建嵌入消息?
- reactjs - 笑话教程中的异步测试
- c - 这种情况下如何实现信息隐藏?
- c# - 通过表格最小化绘制透明而不是黑色的面板
- python - 'garray' 对象没有使用 nolearn-DBN 分类器的属性 'size'