Tab in the text area without changing focus, jQuery

Question

Given the text box, is there any way to use jQuery to let people use the tab key, which is actually. Inserts a tab instead of moving to the next form element on the page?

I watched Capturing a TAB key in a text field , and although this works, I try to flip this into a jQuery plugin to make a specific text field tabbable. The problem is that I don’t quite understand how to apply the concept of these “listeners” to objects that respond to jQuery.

Does anyone have any conclusions on where I could start?

Answer 1

I just wrote a jQuery plugin for this that works in all major browsers. It uses keydown and keypress to bind listener events to a set of elements. Event listeners prevent the default behavior for the key Tab, while the listener keydownalso manually inserts a tab character in the caret / selection.

Here it is in action: http://www.jsfiddle.net/8segz/

In this example, use:

$(function() {
    $("textarea").allowTabChar();
});

Here is the plugin code:

(function($) {
    function pasteIntoInput(el, text) {
        el.focus();
        if (typeof el.selectionStart == "number") {
            var val = el.value;
            var selStart = el.selectionStart;
            el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
            el.selectionEnd = el.selectionStart = selStart + text.length;
        } else if (typeof document.selection != "undefined") {
            var textRange = document.selection.createRange();
            textRange.text = text;
            textRange.collapse(false);
            textRange.select();
        }
    }

    function allowTabChar(el) {
        $(el).keydown(function(e) {
            if (e.which == 9) {
                pasteIntoInput(this, "\t");
                return false;
            }
        });

        // For Opera, which only allows suppression of keypress events, not keydown
        $(el).keypress(function(e) {
            if (e.which == 9) {
                return false;
            }
        });
    }

    $.fn.allowTabChar = function() {
        if (this.jquery) {
            this.each(function() {
                if (this.nodeType == 1) {
                    var nodeName = this.nodeName.toLowerCase();
                    if (nodeName == "textarea" || (nodeName == "input" && this.type == "text")) {
                        allowTabChar(this);
                    }
                }
            })
        }
        return this;
    }
})(jQuery);

Answer 2

Try this simple jQuery function:

$.fn.getTab = function () {
    this.keydown(function (e) {
        if (e.keyCode === 9) {
            var val = this.value,
                start = this.selectionStart,
                end = this.selectionEnd;
            this.value = val.substring(0, start) + '\t' + val.substring(end);
            this.selectionStart = this.selectionEnd = start + 1;
            return false;
        }
        return true;
    });
    return this;
};

$("textarea").getTab();
// You can also use $("input").getTab();

Answer 3

:

$(inputElementSelector).keypress(function(event) {
    if (event.keyCode == 9) {
        //enter your tab behavior here
    }
}

Answer 4

jQuery, , . : BindTabKeyAsCharacter ( "about_us textarea" );

function BindTabKeyAsCharacter(selector) {
    $(document).ready(function () {
        $(selector).each(function () {
            $(this).keydown(function () {
                var e = (window.event) ? event : e;
                if (e.keyCode == 9) { // Tab
                    if (window.event) {
                        window.event.returnValue = false;
                    }
                    else {
                        if (e.cancelable) { e.preventDefault(); }
                    }
                    var before, after;
                    if (document.selection) {
                        this.selection = document.selection.createRange();
                        this.selection.text = String.fromCharCode(9);
                    } else {
                        before = this.value.substring(0, this.selectionStart);
                        after = this.value.substring(this.selectionEnd,     this.value.length);
                        this.value = before + String.fromCharCode(9) + after;
                    }
                    var newCursorPos = before.length + String.fromCharCode(9).length;
                    if (this.setSelectionRange) {
                        this.focus();
                        this.setSelectionRange(newCursorPos, newCursorPos);
                    } else if (this.createTextRange) {
                        var range = this.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', newCursorPos);
                        range.moveStart('character', newCursorPos);
                        range.select();
                    }
                }
            });
        });
    });
}

Answer 5

To the code from Tim Down : I used it in my project and got a strange error. When I insert a simple place at the beginning of the line, the content will not be updated after posting. In my project for text fields, I got a lot of jQuery and Ajax Code. But preventDefault () solved my error:

...
function allowTabChar(el) {
    $(el).keydown(function(e) {
        if (e.which == 9) {
            pasteIntoInput(this, \"\t\");
            e.preventDefault();  // <- I had to add this
            $(el).change();      // To fire change event for my Ajax Code
            return false;
        }
    });
 ...