forum

Home / DeveloperSection / Forums / How to add tabindex dynamically using jquery?

How to add tabindex dynamically using jquery?

Revati S Misra 189 22-Jan-2023

Add tabindex in all HTML input fields dynamically using jquery.

jquery javascript html

Updated on 22-Jan-2023

Revati S Misra

Revati S Misra

Follow

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

1 Answers

Sai Buildrers & Aatma Pvt. Ltd.

25-Jan-2023

The tabindex is specifies the order of HTML input elements. It is used to navigate the HTML element when the tab button is pressed. The tabindex is used in HTML elements as its attribute or property. It is used in HTML elements as an attribute to manage keyboard focus.

You can set the value in attribute tabindex as 1 and -1. When set tabindex = “0”, “1”, ”2”, ”3” etc. then focuses that HTML element when press tab button from keyboard and then set tabindex = “-1” then it will not focus that HTML element because it removes the element from the default navigation. If you set “0” in all HTML elements then it specifies the default order.

There can two ways to set the tabindex attribute in HTML elements,

1- Set as an attribute of HTML input element-

<div tabindex='-1'></div>
<div tabindex='0'></div>
<div tabindex='1'></div>
<div tabindex='2'></div>
<div tabindex='3'></div>

2- Set tabindex attribute in html form dynamically-

Set in all visible fields in form

$('form:input:visible').each(function() {               
   $(this).attr('tabindex', '0');// value can set 0,1,2,3.
 });

Ignore only all hidden fields in form

$('form:input:not(:hidden)').each(function (i) {
 	$(this).attr('tabindex', i + 1); 
 });

Ads