Focus Next Element in Tab Index

Focus Next Element In Tab Index

Without jquery:
First of all, on your tab-able elements, add class="tabable" this will let us select them later.
(Do not forget the "." class selector prefix in the code below)

var lastTabIndex = 10;
function OnFocusOut()
{
    var currentElement = $get(currentElementId); // ID set by OnFOcusIn
    var curIndex = currentElement.tabIndex; //get current elements tab index
    if(curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
        curIndex = 0;
    }
    var tabbables = document.querySelectorAll(".tabable"); //get all tabable elements
    for(var i=0; i<tabbables.length; i++) { //loop through each element
        if(tabbables[i].tabIndex == (curIndex+1)) { //check the tabindex to see if it's the element we want
            tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
            break;
        }
    }
}

Shift focus to next element using tabindex based on keydown()

I am not sure if you can directly access all the elements which have tabIndex registered. Other way would be to maintain all you elements in an array and then for every keydown event you change the focus. Something similar to:

<!DOCTYPE html>
<html>
<body onkeydown="keyDownFn()" onload="init()">

<p>Try navigating the links below by using any key on you keyboard </p>

<p><div id="myAnchor1" tabIndex="1">Link 1</div></p>
<p><div id="myAnchor2" tabIndex="1">Link 2</div></p>
<p><div id="myAnchor3" tabIndex="1">Link 3</div></p>

<script>
var elements;
var current = 1;
var max = 0;
function keyDownFn() {
    // you can add a check for specific keys here.
    elements[current % max].focus();
    current = current+1;
}

function init() {
    // all elements that you want to focus in turn can be stored on load.
    elements = document.getElementsByTagName('div');
    max = elements.length;
    document.getElementById("myAnchor1").focus();
}

</script>

</body>
</html>

Fiddle at https://jsfiddle.net/4my90g4v/

focus() should invoke the onFocus method registered on you elements where you are doing the animations.

How to move focus to next element on enter on dynamically created select

Kind of hard to guess what you are asking for.

There are already multiple suggestions and answers available on SO.

Enter key press behaves like a Tab in Javascript

document.addEventListener('keydown', function (e) {

  if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
    var form = event.target.closest('form');
    var index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    return false;
  }
});

<form>
<div id = "Customer">Customer</div>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
</form>

focus on the next element that has a 'tabindex' property

You'll need to select the :first element:

$(":focus").nextAll('[tabindex]:first').focus();

Notice also, you don't need the * at the start of the :focus selector. This is implied.

There's a full mockup here http://jsfiddle.net/QJQDP/1/

You've also got a typo (an extra ") in your second input.

Simulating the TAB keydown: focusing next element as determined by `tabIndex`

There is no simple programmatic way to do this using Javascript... so here's a brute force way.

According to W3:

Elements that may receive focus should be navigated by user agents
according to the following rules:

Those elements that support the tabindex attribute and assign a
positive value to it are navigated first. Navigation proceeds from the
element with the lowest tabindex value to the element with the highest
value. Values need not be sequential nor must they begin with any
particular value. Elements that have identical tabindex values should
be navigated in the order they appear in the character stream.

Those
elements that do not support the tabindex attribute or support it and
assign it a value of "0" are navigated next. These elements are
navigated in the order they appear in the character stream.

Elements
that are disabled do not participate in the tabbing order.

I accomplished this by storing the order of elements in the form that have tabIndex > 0 in their tabIndex order and then concatenating the rest of the elements in the order they appear within the document. The following code simulates a tab keypress when focused on a form input and the letter 'z' is pressed (but you can change this to whatever condition you require):

$(':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();
                }
            }
        }

    }

});

See demo

focus on next tabindex of HTML element onEnter keypress by JQuery

I found a couple of minor jQuery issues. Fixed here: JSFiddle.

This line:

$('*').attr('tabindex', tabindex).focus();

can be written like this:

$('[tabindex=' + tabindex + ']').focus();

and this:

$('#Msg').text($(this).id + " tabindex: " + tabindex 
           + " next element: " + $('*').attr('tabindex').id);

is not calling the id attribute the jQuery way (you are using JavaScript syntax, but the result of $(this) is a jQuery object. So... $(this).id becomes $(this).attr('id').

The form still has a submission problem, that I didn't dig too far into, but it changes focus and fills out the '#Msg' element now.

Getting focus on next input element anywhere on the page

Try this this will help you

$(document).ready(function() {  $('input').on("keypress", function(e) {
    if (e.which == 13) {      var tab = $(this).attr("tabindex") + 1      $("input[tabindex=" + tab + "]").focus();    }  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><div>  <table>    <tr>      <td>        <input type="text" tabindex="1" />      </td>    </tr>  </table></div><div>  <table>    <tr>      <td>        <input type="text" tabindex="2" />      </td>    </tr>  </table></div>

Focus Next Element in Tab Index