CODEWITHSUNDEEP
javascripthtmlcssbootstrap-5
Code Guy
Code Guy

Reputation: 3198

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.

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

<!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/[email protected]/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>

Upvotes: 0

Views: 692

Answers (1)

Benjamin Penney
Benjamin Penney

Reputation: 820

Spans aren't tabbable controls by default. You can make them tabbable by setting the tabindex attribute on them:

<span class="input-group-text" tabindex="0">🗑</span>

Alternatively, you can use an anchor tag with an href:

<a class="input-group-text" href="#">🗑</a>

Upvotes: 2

Related Questions