focus on next tabindex of HTML element onEnter key

Question

Hi Friends, I'm working on a small task which is to enable the user to tabindex the html element upon enter keypress.

As im new to jquery , I have written some code which seems to me that It will work ,but there are some problems in it.

Initial findings
The culprit code ,it doesnt work ,as the ouput in the Msg lablel is "Undefined"

$('*').attr('tabindex').id

The code is given below and I have even created a JSFiddle.

JQuery

 $(document).ready(function (eOuter) {
    $('input').bind('keypress', function (eInner) {
        if (eInner.keyCode == 13) //if its a enter key
        {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            //after increment of tabindex ,make the next element focus
            $('*').attr('tabindex', tabindex).focus();

                       **//Msg Label**
            //Just to print some msgs to see everything is working
            $('#Msg').text( this.id + " tabindex: " + tabindex 
               + " next element: " + $('*').attr('tabindex').id);

            return false; // to cancel out Onenter page postback in asp.net
        }
    });
}
);

HTML

<div>
    Employee Info<br />
    Name<br />
    <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
    <br />
    Age<br />
    <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
    <br />
    Gender<br />
    <select name="DdlGender" id="DdlGender" tabindex="3">
      <option selected="selected" value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <br />
    <div>
        Previous Employment<br />
        <select name="DdlCompany" id="DdlCompany" tabindex="4">
   <option selected="selected" value="0">Folio3</option>
   <option value="1">Null Soft</option>
   <option value="2">Object Soft</option>
   <option value="3">Excepption Soft</option>
    </select>
        &nbsp;&nbsp;or Enter Code&nbsp;&nbsp;
        <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
        <br />
        Address<br />
        <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
        <br />
       <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/>
        <br />
        <label id="Msg">Message here</label>
    </div>
</div>

Let me know where I went wrong :/

Answer 1

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.

Answer 2

Didn't want to make new post and make SPAM with solution I found useful.

Collected information from other sources (Brian Glaz code nice-one) and made cross-browser version of Focus Next Element In Tab-index using Enter key.

Tab-indexes are not one after another, but may also contain a space between (1,2,9,11,30,etc.)

var tabindex = 1; //start tabindex || 150 is last tabindex
    $(document).keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') { //onEnter
            tabindex++;
            //while element exist or it's readonly and tabindex not reached max do
            while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
                tabindex++;
            }
            if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
            $("[TabIndex='"+tabindex+"']").focus()
            return false;
        }
    });

    $("input").click(function() { //if changing field manualy with click - reset tabindex 
        var input = $(this);
        tabindex = input.attr("tabindex");
    })

I hope that someone will find it useful. Feel free to edit/comment it.

Answer 3

var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();

sample for Editable cells in table

    $(document).on('dblclick', 'td', function () {
        console.log('clicked');
        this.contentEditable = 'true';
    });
 $(document).on('keydown', 'td', function (event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            this.contentEditable = 'false';
            //  $(this).next().focus().dblclick().focus();
            var tabindex = $(this).attr('tabindex');
            tabindex++;
            var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
            if (next.is('td') == false)
                return true;
            var sel, range;
            if (window.getSelection && document.createRange) {
                range = document.createRange();
                range.selectNodeContents(next[0]);
                range.collapse(true);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(next[0]);
                range.collapse(true);
                range.select();
            }

            return false;
        }
    });

Editable cells in dynamic table

Answer 4

Seeking for a solution for exactly this problem, I generated a small jquery function to find the next valid tabindex; suppose it's a bit easier to maintenance and maybe a bit faster than a while loop:

function getNextTabindex(currentTabIndex) {
  return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}

Hope this to be helpful to whoever needs it; this is tested and works.

Explaning this in short: seek for the element of the current tabindex, find this element in the list of all tabindex elements, get the index of it and increase the index.

Then, using this function, you may select the next tabindex element that way:

$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();

I didn't test the call but suppose it to work.

Answer 5

Here is my full working code to focusNextElement on keydown [Enter] without jQuery with JSFiddle example created based on the following stackoverflow answers:

1. How to prevent ENTER keypress to submit a web form?
2. Focus Next Element In Tab Index

<script type="text/javascript">

    function focusNextElement() {
      var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
      if (document.activeElement && document.activeElement.form) {
        var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
          function(element) {
            return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
          });
        var index = focussable.indexOf(document.activeElement);
        focussable[index + 1].focus();
      }
    }

    window.addEventListener('keydown', function(e) {
      if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
          e.preventDefault();
          focusNextElement();
          return false;
        }
      }
    }, true);

</script>

Answer 6

var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();