Switch Between Two Textareas Only When Pressing Tab Button

Normally when a user is visiting a web page and pressing TAB button on a keyboard, the selection moves from one element to another starting from the begining of the page. I am lo

Solution 1:

Catch the keydown action using jQuery, determine which textarea has focus, and then use the focus() method to set the focus to the other textarea.

Supposing that your textareas have id="textarea1" and id="textarea2". First you can set focus to the first textarea when the page loads by doing : $('#textarea1').focus();

$("body").keypress(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    switch(code)
    {
        case9:
            if($("#textarea1").focus()){
                //First one has focus, change to second one
                $("#textarea2").focus();
            }
            elseif($("#textarea2").focus()) {
                //Second one has focus, change to first one
                $("#textarea1").focus();
            }

    }
});

Solution 2:

Ok I have found the solution for for my task! It also includes the simulation of ENTER key just after the TAB key event, so user do not need to hit ENTER to go to the new line. Tested with IE9, FF12, Chrome 18.0.x

Here it is:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!-- Switching between ICCIDs and MSISDNs textareas + simulating ENTER key pressing after the TAB key event - START --><scripttype="text/javascript">
            $(function() {
                $(document).ready(function() {
                $("#ICCID").focus();
                });

                var $inp = $('.cls');

                $inp.bind('keydown', function(e) {
                    var key = e.which;
                    if (key == 9) {

                        e.preventDefault();
                        var nxtIdx = $inp.index(this) + 1;                  
                        $(".cls:eq(" + nxtIdx + ")").focus();

                    //Simulate Enter after TABvar textInput = $("#MSISDN").val();
                    var lines = textInput .split(/\r|\r\n|\n/);
                    if (lines > 1) {

                        $("#MSISDN").on("keyup", function(e) {
                        if (e.keyCode == 9 || e.which  == 9) {
                        var input = $(this);
                        var inputVal = input.val();
                        setTimeout(function() {
                        input.val(inputVal.substring(0,inputVal.length) + "\r\n");
                              }, 1);
                           }
                        });
                    }



                    }
                    if (key == 9) {

                        e.preventDefault();
                        var nxtIdx = $inp.index(this) - 1;
                        $(".cls:eq(" + nxtIdx + ")").focus();

                    //Simulate Enter after TAB
                    $("#ICCID").on("keyup", function(e) {
                    if (e.keyCode == 9 || e.which  == 9) {
                    var input = $(this);
                    var inputVal = input.val();
                    setTimeout(function() {
                    input.val(inputVal.substring(0,inputVal.length) + "\r\n");
                          }, 1);
                       }
                    });


                    }
                });
            });
    </script><!-- Switching between ICCIDs and MSISDNs textareas + simulating ENTER key pressing after the TAB key event -  END -->

Solution 3:

What about this.... Im to bored at work i think..

http://jsbin.com/uqalej/3/

HTML:

<input/><textareaid="t1"></textarea><textareaid="t2"></textarea><input/><buttononClick='window.toggleBetween=true;'>Init</button><buttononClick='window.toggleBetween=false;'>Destroy</button>

JS:

var d = document,
    t1 = d.getElementById("t1"),
    t2 = d.getElementById("t2"),

    nodeType, nodeTypes = [],
    i, iLen,
    y, yLen;

nodeTypes.push( d.getElementsByTagName("textarea") );
nodeTypes.push( d.getElementsByTagName("input") );
nodeTypes.push( d.getElementsByTagName("select") );

i = 0;
iLen = nodeTypes.length;
for ( ; i < iLen; i++ ) {
  nodeType = nodeTypes[i];
  y = 0;
  yLen = nodeType.length;
  for ( ; y < yLen; y++ ) {
    if ( nodeType[y] != t1 && nodeType[y] != t2 ) {
      nodeType[y].onfocus = function() {
        if ( window.toggleBetween )
          t1.focus();
      };
    }
  }
}

Solution 4:

Using javascript on page load:

document.getElementById("textarea1").focus();
document.getElementById('textarea1').tabIndex="1";
document.getElementById('textarea2').tabIndex="2";