How do you tab through text in html text input?

Question

So I need a way of being able to tab to the next line in an html text input without it skipping to the next html input, is this possible?

Hello. You might want to edit your question because it's not clear. Do you want, as a User to use tabs in the text input or do you want to create an input text area where it is possible to tab ? Both questions have different answers. — Carele, Jun 21 '16 at 08:14

score 0 · Answer 1 · edited May 23 '17 at 11:52

You can do it by Jquery:

Easiest one is:

    $("input").change(function() {  
      var inputs = $(this).closest('form').find(':input');  
      inputs.eq( inputs.index(this)+ 1 ).focus();  
    });

If these solutions doesn't help then provide your code, so that it will be easier to understand.

score 0 · Answer 2 · answered Jun 21 '16 at 08:36

If you really are trying to MAKE a textarea field where users can tab, you don't need jQuery. See this jsFiddle : http://jsfiddle.net/2wAzx/13/

function enableTab(id) {
    var el = document.getElementById(id);
    el.onkeydown = function(e) {
        if (e.keyCode === 9) { // tab was pressed

            // get caret position/selection
            var val = this.value,
                start = this.selectionStart,
                end = this.selectionEnd;

            // set textarea value to: text before caret + tab + text after caret
            this.value = val.substring(0, start) + '\t' + val.substring(end);

            // put caret at right position again
            this.selectionStart = this.selectionEnd = start + 1;

            // prevent the focus lose
            return false;

        }
    };
}

// Enable the tab character onkeypress (onkeydown) inside textarea...
// ... for a textarea that has an `id="my-textarea"`
enableTab('my-textarea');

Also, if that is your question, i'd recommend marking it as a duplicate since it has been asked more than once on SO...

How do you tab through text in html text input?

2 Answers2