I recently had a situation where the user needed to be able to insert tabs into a texarea. Normally, when the cursor is inside of a textarea, pressing tab will move the cursor to the next field or button in the form. However, in this case, I needed to change that behavior and make the tab key insert a tab character into the textarea content instead. Here’s how I did it in raw Javascript, no jQuery needed.

Note: Doing this will break the accessibility of your page in a very bad way. Make sure you have a Very Good Reason to do this before implementing it, as it will make it impossible for users to tab out of the textarea.

/**
 * Hijack the tab key to insert the tab into the content rather than moving the cursor to the next field or button in
 * the form.
 */
document.getElementById( 'my-texarea' ).addEventListener( 'keydown', function( event ) {

    if ( event.keyCode === 9 ) {

        // Set up some variables. We need to know the current position of the cursor or selection.
        var selectionStartPos = this.selectionStart;
        var selectionEndPos   = this.selectionEnd;
        var oldContent        = this.value;

        // Set the new content.
        this.value = oldContent.substring( 0, selectionStartPos ) + "\t" + oldContent.substring( selectionEndPos );

        // Set the new cursor position (current position + 1 to account for the new tab character).
        this.selectionStart = this.selectionEnd = selectionStartPos + 1;

        // Prevent the default action (tabbing to the next field or control).
        event.preventDefault();
    }
});

Note: You will want to make sure this code runs after the DOM has been loaded, or it will not be able to access your textarea.