在html表单中使用箭头而不是鼠标来导航输入

在html表单中使用箭头而不是鼠标来导航输入,html,forms,Html,Forms,大家好,我有一些简单的html表单,是我为我妈妈制作的,这样她就可以记录她的房屋状况,但最近她的骨质疏松症使她很难使用鼠标 她问我是否有办法在表单中添加一个功能,这样她就可以使用箭头键从一个输入框移动到下一个输入框,并从下拉框中选择 这是否可能以一种简单的方式实现,还是相当先进 表格没什么特别的,我在大学的第二年就要开始了,我学了6个月的html,所以我的知识有限。这是我为她制作的表格的链接,让你明白我的意思 “这是为适应手机而设计的,但我已经制作了更好的网站,使用JS重定向到手机css并使用m

大家好,我有一些简单的html表单,是我为我妈妈制作的,这样她就可以记录她的房屋状况,但最近她的骨质疏松症使她很难使用鼠标

她问我是否有办法在表单中添加一个功能,这样她就可以使用箭头键从一个输入框移动到下一个输入框,并从下拉框中选择

这是否可能以一种简单的方式实现,还是相当先进

表格没什么特别的,我在大学的第二年就要开始了,我学了6个月的html,所以我的知识有限。这是我为她制作的表格的链接,让你明白我的意思

“这是为适应手机而设计的,但我已经制作了更好的网站,使用JS重定向到手机css并使用meta标记,同样,这是一个基本的”

有人能告诉我如何用表格做到这一点吗:)


非常感谢edd扩展我的评论-她可以使用TAB键或SHIFT+TAB键后退,您可以使用
tabindex
编辑表单以设置元素的特定顺序

在中间元素中开始,使用Tab和Shift + Tab来查看它是如何工作的:

2
1.

3
展开我的评论-她可以使用TAB键或SHIFT+TAB键向后移动,您可以使用
tabindex
编辑表单以设置元素的特定顺序

在中间元素中开始,使用Tab和Shift + Tab来查看它是如何工作的:

2
1.

3
选项卡键使用HTML属性执行此操作。如果需要,也可以通过为箭头键绑定一个事件并在每个要切换的元素上放置一个
arrow toggable
类来模拟箭头按键:

var elements=document.getElementsByClassName(“arrow-togglable”);
var currentIndex=0;
document.onkeydown=函数(e){
开关(如钥匙代码){
案例38:
currentIndex=(currentIndex==0)?elements.length-1:--currentIndex;
元素[currentIndex].focus();
打破
案例40:
currentIndex=((currentIndex+1)=elements.length)?0:++currentIndex;
元素[currentIndex].focus();
打破
}
};
input{margin:5px 0;}



选项卡
键使用HTML属性执行此操作。如果需要,也可以通过为箭头键绑定一个事件并在每个要切换的元素上放置一个
arrow toggable
类来模拟箭头按键:

var elements=document.getElementsByClassName(“arrow-togglable”);
var currentIndex=0;
document.onkeydown=函数(e){
开关(如钥匙代码){
案例38:
currentIndex=(currentIndex==0)?elements.length-1:--currentIndex;
元素[currentIndex].focus();
打破
案例40:
currentIndex=((currentIndex+1)=elements.length)?0:++currentIndex;
元素[currentIndex].focus();
打破
}
};
input{margin:5px 0;}



谢谢你,尼克,它工作得很好:),javascript是可以理解的,我没有使用currentindex,所以我将了解更多关于它的信息,再次感谢尼克。

谢谢你,尼克,它工作得很好:),javascript是可以理解的,我没有使用currentindex,所以我将了解更多关于它的信息,再次感谢你,尼克。

只需使用
选项卡
键?0_O lol我不知道,谢谢,伙计,至少有一个简单的方法,但正如我发布的那样,我可以添加任何脚本或函数。正如@J.Titus所说,你可以随时使用
选项卡
跳转到下一个输入。您甚至可以使用
SHIFT+TAB
返回。输入下拉列表时,您已经可以使用
UP
DOWN
键选择值。无论如何,覆盖箭头键不是一个好主意,因为在大多数浏览器中,您可以使用它们滚动页面(水平和垂直。处理TAB和TAB+SHIFT的Javascript示例只需使用
TAB
key?0_O lol我不知道,谢谢,伙计,至少有一种简单的方法,但正如我发布的那样,我可以添加任何脚本或函数。正如@J.Titus所说,您可以使用
TAB
随时跳转到下一个输入。您可以使用
SHIFT+TAB
返回。当您输入下拉列表时,您已经可以使用
UP
DOWN
键来选择值。无论如何,覆盖箭头键不是一个好主意,因为在大多数浏览器中,您可以使用它们滚动页面(水平和垂直。处理TAB和TAB+SHIFT的Javascript示例这不应该是答案。请使用注释而不是答案。这不应该是答案。请使用注释而不是答案