TAB keypress simulation: focus of the next item defined by `tabIndex`

Question

I have two input elements, the first is focused, and I want to focus the second by simulating the TAB / keydown key event. (Note: I do not want to use .next() or such.)

This is my code inspired by this question :

 $('input').first().focus(); var e = $.Event('keydown'); e.which = 9; // TAB $(':focus').trigger(e); 

See http://jsfiddle.net/3PcPH/

The code does not work. What's wrong?

Answer 1

There is a simple programmatic way to do this with Javascript ... so here is a rough way.

According to W3 :

Elements that can receive focus must be moved by user agents in accordance with the following rules:

• Those elements that support the tabindex attribute and assign a positive value to it are implemented first. Navigation comes from the element with the lowest tabindex value for the element with the highest value. The values ​​do not have to be sequential and do not have to start with any particular meaning. Elements that have the same tabindex values ​​must be moved in the order they appear in the character stream.
• Those elements that do not support the tabindex attribute or support it and set it to "0". These elements move in the order in which they appear in the character stream.
• Items that are disabled do not participate in the tab order.

I accomplished this by preserving the order of the elements in a form that has tabIndex > 0 in its order, tabIndex, and then concatenates the remaining elements in the order in which they appear in the document. The following code mimics the Tab key while focusing on form input and the letter "z" is pressed (but you can change this to whatever condition you need):

 $(':input').keypress(function(e){ // if 'z' pressed if (e.which == 122) { // if we haven't stored the tabbing order if (!this.form.tabOrder) { var els = this.form.elements, ti = [], rest = []; // store all focusable form elements with tabIndex > 0 for (var i = 0, il = els.length; i < il; i++) { if (els[i].tabIndex > 0 && !els[i].disabled && !els[i].hidden && !els[i].readOnly && els[i].type !== 'hidden') { ti.push(els[i]); } } // sort them by tabIndex order ti.sort(function(a,b){ return a.tabIndex - b.tabIndex; }); // store the rest of the elements in order for (i = 0, il = els.length; i < il; i++) { if (els[i].tabIndex == 0 && !els[i].disabled && !els[i].hidden && !els[i].readOnly && els[i].type !== 'hidden') { rest.push(els[i]); } } // store the full tabbing order this.form.tabOrder = ti.concat(rest); } // find the next element in the tabbing order and focus it // if the last element of the form then blur // (this can be changed to focus the next <form> if any) for (var j = 0, jl = this.form.tabOrder.length; j < jl; j++) { if (this === this.form.tabOrder[j]) { if (j+1 < jl) { $(this.form.tabOrder[j+1]).focus(); } else { $(this).blur(); } } } } }); 

Watch the demo

Answer 2

By default, the tab behavior is to simply go to the next element in the form (in the original order) so that you can simply iterate over all the elements you need, find the one that has focus, and move the focus to the next. We have :input selector to search for form elements so something like this:

 var $all = $('form :input'); var focused = $(':focus')[0]; for(var i = 0; i < $all.length - 1; ++i) { if($all[i] != focused) continue; $all[i + 1].focus(); break; } // Must have been focused on the last one or none of them. if(i == $all.length - 1) $all[0].focus(); 

Demo: http://jsfiddle.net/ambiguous/Avugy/1/

Or you can set the tabindex attributes and increase them with wrap-around:

 var next_idx = parseInt($(':focus').attr('tabindex'), 10) + 1; var $next_input = $('form [tabindex=' + next_idx + ']'); if($next_input.length) $next_input.focus(); else $('form [tabindex]:first').focus(); 

Demo: http://jsfiddle.net/ambiguous/k9VpV/

Working with spaces in the tabindex attribute tabindex remains as an exercise.

Answer 3

Try this sample http://jsfiddle.net/mporras/3jXQQ/18/embedded/result/

Answer 4

Here is a solution using jquery to simulate a TAB function with the Enter key:

https://jsfiddle.net/tuho879j/

 $('input').keypress(function(event){ if(event.which == '13') //ENTER { var tabIndex = $(this).attr('tabIndex'); var all_inputs = $(this).closest('table').find('input:visible'); var inputs = all_inputs.filter(function() { return $(this).attr("tabIndex") > tabIndex; }) if(inputs.length != 0) { inputs = $(inputs).sort(function(a,b){ return $(a).attr('tabIndex')-$(b).attr('tabIndex'); }); } else { inputs = $(all_inputs).sort(function(a,b){ return $(a).attr('tabIndex')-$(b).attr('tabIndex'); }); } var elem = inputs.eq( inputs.index(this)+ 1 ); if(elem.length == 0) elem = inputs.eq(0); elem.focus(); event.preventDefault(); } }); 

Answer 5

 $('input').first().focus(); var e = $.Event('keydown'); e.which = 9; // TAB $(':focus').bind('keydown',function(e){ if(e.which == 9){ //this.value="tab"; $('input:eq(1)').focus(); } e.preventDefault(); }); 

you need to bind the "keydown" event and configure your event function.