将退格后的前一个文本设置为选中

时间:2013-08-05 09:31:38

标签: javascript html jsp

我有4个文本框,其中autotab正在工作。

我有要求就像我点击后退空格然后焦点应该转到前一个文本。(文本框最大长度= 1)

我正在检查eventCode == 8 ...但它无效。

请建议同样的。

最诚挚的问候 Arvind

1 个答案:

答案 0 :(得分:0)

好吧,尽管我担心用户界面,但这是我建议的一种方法;它基本上是我写的一个简单的插件:

(function ($) {
    $.fn.autotab = function (options) {
        // setting the defaults, which may be overridden by the user:
        var settings = $.extend({
            'ontab': 'select', // or 'focus'
            'forward': 'auto',
            'max': 'auto',
            // the keyCode of the relevant key:
            'back': 8
        }, options);
        // caching the jQuery object (the elements selected by the selector):
        var all = this,
            // caching that selector for later use:
            selector = this.selector;
        // setting the 'maxlength' attribute:
        this.attr({
            'maxlength': function () {
                // caching the setting for 'maxlength':
                var m = $.trim(settings.max.toString().toLowerCase());
                /* if the default is used, or 'auto' is set *and*
                   there is a 'maxlength' attribute in the HTML we use that:
                */
                if (m == 'auto' && this.getAttribute('maxlength')) {
                    return Math.abs(parseInt(this.getAttribute('maxlength'), 10));
                } else {
                    // otherwise we use the submitted setting *or* 1:
                    return Math.abs(parseInt(settings.max, 10)) || 1;
                }
            }
        })
            .on('keyup', function (e) {
            // caching:
            var self = this,
                $self = $(self),
                // finding the length of the current value-string:
                len = self.value.length,
                max = parseInt(self.getAttribute('maxlength'), 10),
                /* the index of the current element amongst the elements returned by
                   the selector:
                */
                i = $self.index(selector),
                /* previous element from the collection if it exists, otherwise
                   the current element:
                */
                prev = i === 0 ? $self : all.eq(i - 1),
                /* next element from the collection if it exists, otherwise
                   the current element:
                */
                next = i === (all.length - 1) ? $self : all.eq(i + 1);
            // either focus, or select, the relevant element:
            if (len === max) {
                next[settings.ontab]();
            } else if (len === 0 && e.which === settings.back) {
                prev[settings.ontab]();
            }
        });
        // returning the elements found by the selector for chaining purposes:
        return this;
    };
})(jQuery);

$('input[name="group1"]').autotab({
    // the name of a jQuery method (without parentheses):
    'ontab': 'focus',
    /* can be 'auto', '2' or 2 (or any other number), including `-2` if you like,
       thank goodness for simple sanity-checks (negative numbers are invalid):
    */
    'max': '2'
});

JS Fiddle demo

参考文献: