Change tabindex dynamically in jquery

Question

Imagine this simple layout ( http://jsfiddle.net/4F9cL/ ). We have a table, for each row i have a label a textbox and a checkbox. The first textbox has tabindex = 1 , the first checkbox has tabindex = 2, the next textbox on the second row has tabindex = 3 and so on.

What i would like to do is change the tabindex on the checkbox on the same row for the textbox that im in if the content of the textbox has changed.

For example at the moment im checking the checkbox on the row that the thebox content has been changed, i do that with the following code:

 $("input:text").change(function () {
            $(this).parents('tr:first').find('input:checkbox').prop('checked', 'checked');

So the scenario is the following: If the content of the textbox hasnt changed, when i tab i want the focus to change to the checkbox on the same row. If the content of the textbox HAS changed, i would like the focus to be on the next textbox on the row below INSTEAD of the checkbox on the same row.

I hope i explained it good enough for you to understand what im trying to do. I've tried using .removeprop() and .removeattr() but that doesnt work and when next tab hits it just goes to the bottom of the page.

Flater · Accepted Answer · 2014-05-14 13:11:01Z

3

$("input:text").change(...);

The change event of a textbox will only be executed once the textbox loses focus. This means that when you press Tab, that function has not yet run, and you'll end up with your old tabindex target.

$("input:text").keyup(...);
$("input:text").keydown(...);

These events will fire when you either press down on (keydown), or release (keyup) a button while the textbox is focused.

Something like this should do the trick:

$("input:text").keyup(function() {
    var textBox = $(this);
    var textBoxIsEmpty = textBox.val().length == 0; //I assume you use this to determine which element should be the next to get focused when pressing tab.

    var currentTabIndex = parseInt( textBox.attr("tabindex") );

    var nextTarget = GetNextTarget(textBoxIsEmpty); //not sure how you define this. This is the item you want to be your next target when you press tab.
    var nextTabIndex = currentTabIndex + 1;

    nextTarget.attr("tabindex", nextTabIndex);
});

Although I am not 100% sure if changing the tabindex dynamically works in every browser.

edited May 14, 2014 at 13:11

answered May 14, 2014 at 13:04

Flater

14.1k4 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3636683 Over a year ago

So i tested with: $("input:text").keydown(function () { $(this).parents('tr:first').find('input:checkbox').removeAttr('tabindex'); }); This removed the tabindex all together on the checkboxes. Now i need this to trigger only when the content of the textbox im at has changed. Do you know how?

Flater Over a year ago

Did you check the variables I added in my snippet? I put a boolean in there under the name textBoxIsEmpty. Basically, allmy snippet is missing is the code piece on how you select what the next item should be, based on that boolean (that's what the magic function GetNextTarget(bool) is supposed to do in my example)

user3636683 Over a year ago

The textboxes will always be populated with information, they will never be empty. Sorry for not clarifying this earlier.

Flater Over a year ago

In that case, you'll need to keep track of the initial value of the textbox (e.g. store all intitial values in a list when the page has just loaded), and then compare that to the current value of the textbox (make sure you retrieve the correct initial value from the list you compiled earlier). Then you end up with a similar boolean, and the rest of the code is still correct.

user3636683 Over a year ago

shouldn't this suffice: $("input:text").focusin(function () { textBoxContent = $(this).val(); }); then i can just check on keydown if $(this) differs from textBoxContent and if it does i remove the tabindex

|

Sapnandu · Accepted Answer · 2015-05-27 12:10:18Z

0

I have tried like that and it's working fine for me. before applying this you should clear on this you have declare you tabindex in the input properly.

jQuery("input:text").keyup(function() {    
  currentTabIndex = parseInt(jQuery(this).attr("tabindex") );
  nextTabIndex = currentTabIndex + 1;
  jQuery('input[tabindex='+nextTabIndex+']').select();
});

answered May 27, 2015 at 12:10

Sapnandu

6408 silver badges10 bronze badges

Collectives™ on Stack Overflow

Change tabindex dynamically in jquery

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related