1

看看我制作的以下jquery插件：

(function($) {

    //
    // Constructor.
    //

    var Tb = function(element, options) {
        var self = this;

        this.options = options;
        this.$element = $(element);
        this.$input = $(element).find('.tb-input');
        this.$label = $(element).find('.tb-label');

        this.$element
            .proxy('click', this.$input.click)
            .proxy('val', this.$input.val);
    };

    Tb.prototype = {
        constructor: Tb
    };

  //
    // jQuery plugin.
    //

    $.fn.tb = function(option) {
        return this.each(function() {
            var $this = $(this)
                , data = $this.data('tb')
                , options = $.extend({}, $.fn.tb.defaults, $this.data(), typeof option == 'object' && option);

            if (!data) {
                $this.data('tb', (data = new Tb(this, options)));
            }

            if (typeof(option) == 'string') {
                data[option]();
            }
        });
    };

    $.fn.tb.defaults = {};
    $.fn.tb.Constructor = Tb;

})(window.jQuery);

HTML（演示）

<div id="tb-user-name" class="tb">
    <label class="tb-label">This is the placeholder</label>
    <input type="text" class="tb-input" />
</div>

javascript初始化：

$('#tb-user-name').tb();

所以基本上如果我这样做：

$('#tb-user-name').val(); // Should return the value of the input not the "container".
$('#tb-user-name').focus(); // Should focus on the input, not the "container"

但是我的代码不起作用，我该怎么做？我已经尝试过“on”，但这也不起作用，确实可以通过一些工作来专注于焦点，但“val”不是一个事件而是一个函数。

更新（工作但很老套）

http://jsfiddle.net/tppiotrowski/WSdmL/3/

感谢@teddybeard 提供此解决方案，但这不是最好的方法，因为这有点骇人听闻，而且由于在每个关键事件上都会触发 val 事件，所以我正在寻找一种替代方法，如果有人可以帮助我的话惊人的。

4

1 回答 1

2

看看这个小提琴：http: //jsfiddle.net/tppiotrowski/WSdmL/3/

您尝试做的是在特定元素上使用 jQuery 时覆盖默认值focus()和行为。val()下面，我重写了val()andfocus()函数，使其在被具有 class 的元素调用时具有特殊行为.tb：

(function($) {
    var originalVal = $.fn.val;
    $.fn.val = function(value) {
        var self = this;
        if (this.hasClass('tb')) self = this.find('.tb-input').first();
        if (typeof value == 'undefined') {
            return originalVal.call(self);
        } else {
            return originalVal.call(self, value);
        }
    };
    var originalFocus = $.fn.focus;
    $.fn.focus = function(value) {
        var self = this;
        if (this.hasClass('tb')) self = this.find('.tb-input').first();
        if (typeof value == 'undefined') {
            return originalFocus.call(self);
        } else {
            return originalFocus.call(self, value);
        }
    };
})(jQuery);
于 2012-12-04T03:51:42.733 回答