javascript - Tab within a text area without changing focus, jQuery - Stack Overflow

admin管理员组

文章数量:1356957

Given a textarea, is there any way to use jQuery to enable the ability for people to use the "tab" key that actually ..inserts a tab, instead of jumping focus to the next form element on the page?

I've followed Capturing TAB key in text box and while this does work, I'm looking to try and wrap this into a jQuery plugin to make a specific textbox tabbable. The problem is, I'm not entirely understanding how to apply the concept of these 'listeners' to objects that corrospond to jQuery.

Does anyone have some leads on where I could start?

Given a textarea, is there any way to use jQuery to enable the ability for people to use the "tab" key that actually ..inserts a tab, instead of jumping focus to the next form element on the page?

I've followed Capturing TAB key in text box and while this does work, I'm looking to try and wrap this into a jQuery plugin to make a specific textbox tabbable. The problem is, I'm not entirely understanding how to apply the concept of these 'listeners' to objects that corrospond to jQuery.

Does anyone have some leads on where I could start?

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked Dec 7, 2010 at 17:18 CielCiel 17.8k2424 gold badges106106 silver badges200200 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 20

I've just written a jQuery plug-in to do this that works in all major browsers. It uses keydown and keypress to bind event listeners to a set of of elements. The event listeners prevent the default behaviour for the Tab key, while the keydown listener also manually inserts a tab character at the caret/selection.

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

Here's an example use:

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

Here's the plug-in 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);

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();

Have your plugin do something like this:

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

Pass this function a jQuery selector that matches the elements you want to enable the Tab character in. For instance: 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();
                    }
                }
            });
        });
    });
}

To the code from Tim Down: I used it in my project and got a strange bug. When I insert a simple space in the beginning of a row the content will not update after submit. I got a lot of jQuery and Ajax Code in my project for textareas. But preventDefault() solved my bug:

...
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;
        }
    });
 ...

本文标签： javascriptTab within a text area without changing focusJQueryStack Overflow