文本区域内的选项卡，而无需更改焦点，jQuery [英] Tab within a text area without changing focus, jQuery

问题描述

给出一个文本区域，是否有任何方法可以使用jQuery来使人们能够使用实际上..插入一个标签的"tab"键，而不是将焦点转移到页面上的下一个表单元素? >

我一直关注在文本框中捕获TAB键，而与此同时确实有效，我正在尝试将其包装到jQuery插件中以使特定的文本框成为可选项.问题是，我不完全了解如何将这些侦听器"的概念应用于与jQuery对应的对象.

有人在我可以从哪里开始方面有一些线索吗?

解决方案

我刚刚编写了一个jQuery插件来做到这一点，该插件可在所有主流浏览器中使用.它使用 keydown 和按键将事件侦听器绑定到一组元素.事件侦听器可防止 Tab 键的默认行为，而keydown侦听器还会在插入符/选择中手动插入制表符.

这里正在起作用: http://www.jsfiddle.net/8segz/

这是一个示例用法:

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

这是插件代码:

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

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?

解决方案

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

这篇关于文本区域内的选项卡，而无需更改焦点，jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！