focus on next tabindex of HTML element onEnter keypress by JQuery

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

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>