What javaScript code can I use so that the tab key skips one tabindex and the carrage return key skips X tabindexes?

Question

I am an amateur coder and javaScript novice (or less), and I am trying to build an online form with multiple (many) <textarea> inputs.

For arguments sake , let's presume it is a 3 x 3 type orientation:

For reasons of other functionality & performance, I must use <textarea> and not <inputs> .

If a person presses [TAB], then as expected the tab-index is adhered to with no worries ( A1 --> B1 ).

If a person pressed [RETURN], because it is a <textarea> , it adds the \\n delimiter, breaks the line and remains within the still focused <textarea> .

What I would like to happen is that when a person presses [RETURN], then three tab-indexes are 'skipped' (if that is the right word), and the focus goes to the <textarea> directly below the previous focused <textarea> .

Example: I am in A1; I write/input something; I press [RETURN]; I am taken directly to A2.

[[UPDATE]]

Example of the HTML text area code:

<textarea data-id="0" class="inputArea colorInput" id="dataInput_0" name="colorInput_row_1" onFocus="classFocused();" onBlur="classBlured();" onKeyUp="splitInput();"></textarea>

Answer 1

Use the jQuery javascript framework, attach key press event listeners to your text areas and if the key pressed is [ENTER] (key code 13) then you shift focus to the field you want (preferably you set IDs for text areas to identify them easily).

HTML

<textarea class="ta" data-id="1"></textarea>
<textarea class="ta" data-id="2"></textarea>
<textarea class="ta" data-id="3"></textarea>

<textarea class="ta" data-id="4"></textarea>
<textarea class="ta" data-id="5"></textarea>
<textarea class="ta" data-id="6"></textarea>

<textarea class="ta" data-id="7"></textarea>
<textarea class="ta" data-id="8"></textarea>
<textarea class="ta" data-id="9"></textarea>

Javascript

$(document).ready(function(){

    //attach the event listener on your text areas
    $('.ta').keypress(function(e){
        if (e.keyCode == 13) //check if [enter] was pressed
        {
            var currentID = $(this).attr('data-id'); //get the ID of the text area where this happened
            if (currentID < 7) $('.ta[data-id="' + (currentID + 3) + '"]').focus(); //if there are other text areas down the line, shift the focus
        }
    });

})