dynamically created input button is being skipped by tabbing ... how to set tabindex

Question

I have dynamically created a table with elements followed by a search and reset button. In general tabbing works through input fields and select fields in the table. Tabbing skips over checkbox which is not bothering me. However, after the table comes two buttons, search and reset. Adding these buttons dynamically will get skipped over when tabbing.

$('#' + div_id).append('<input type="button" class = "button" value="Search" onclick="'+this.table_name+'.submitSearch()">');
$('#' + div_id).append('<input type="button" class = "button" value="Reset" onclick="'+ this.table_name +'.resetSearch()">');

I have tried adding the following code:

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

Which is not helping. Php generated html code works as expected. Thanks for your help!!!

Answer 1

I assume you are on a Mac? Checkboxes and buttons are by default not included in the "tab" rotation. You can change the setting in Settings, Keyboard, Shortcuts, and choose All Controls at the bottom. The buttons and checkboxes should now be included in the rotation, and yes, it should cycle based on the order they appear in the DOM hierarchy.