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 :/

Clamor

@ruffin Can I go with Dude :) or Just Guys ? – Clamor

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.

Reeves

How to bind for keypress event , elements such as <select> – Clamor

The previous jsfiddle jsfiddle.net/vansimke/PPB9s/3 has an error fixed in its next revision jsfiddle.net/PPB9s/4 with keypress event binding for select control. To bind keypress event with multiple control types, separate them with comma: $('input, select').bind('keypress', function(eInner){}); – Bitterling

@Coder thanx for that but I'm going to use $(":input") ,which selects all the element which can take input such as textarea etc – Clamor

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>

Stipend

This is the best solution I found so far. But since keyCode is deprecated, I recommend replacing it with e.key == 'Enter' – Raseda

Answer 3

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.

Scurf

also if you need focus to previous item by shift+tab then this answer will complete your: #6422436 – Ara

Answer 4

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

Peppel

Answer 5

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.

Labialized

Answer 6

tab-index should always be 0. As noted by WebAIM Keyboard Accessibility documentation and W3C criterion. Hope this helps.

Preterit

Answer 7

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

Sponger