按下 Tab 键时焦点不会移动到每个表单控件
[英]Focus not moving to every form control when tab key is pressed
问题描述
I have a form where I need to allow users to click delete and add using keyboard.
我有一个表单，我需要允许用户使用键盘单击删除和添加。 The genral rule is that users use tab key to shift focus from one control to other.一般规则是用户使用 Tab 键将焦点从一个控件转移到另一个控件。
When tab is pressed for the form the active control will move only to textboxes and not to add and delete corner buttons.当为表单按下选项卡时，活动控件将仅移动到文本框，而不是添加和删除角按钮。
I am using bootstrap 5.2我正在使用引导程序 5.2
<:doctype html> <html lang="en"> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min:js"></script> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/gh/somethinggoodone/cdn/AniketPradhan_bootstrap:css"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> </head> <body> <div class="input-group"> <span class="input-group-text"></span> <input type="text" aria-label="First name" class="form-control"> <input type="text" aria-label="Last name" class="form-control"> <span class="input-group-text">+</span> </div> <div class="input-group"> <span class="input-group-text"></span> <input type="text" aria-label="First name" class="form-control"> <input type="text" aria-label="Last name" class="form-control"> <span class="input-group-text">+</span> </div> </body>
1 个解决方案
解决方案1
2 已采纳 2022-11-21 03:26:42
Spans aren't tabbable controls by default.默认情况下，Span 不是可选项卡式控件。 You can make them tabbable by setting the tabindex attribute on them:您可以通过在它们上设置tabindex属性使它们可制表：
<span class="input-group-text" tabindex="0">🗑</span>
Alternatively, you can use an anchor tag with an href:或者，您可以使用带有 href 的锚标记：
<a class="input-group-text" href="#">🗑</a>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.