如何在特殊输入类型上添加清除按钮

时间:2015-02-09 13:15:22

标签: javascript jquery twitter-bootstrap x-editable

我需要将此x-editable pluginbootstrap3 version一起使用。

您可以在x-editable bootstrap3演示中看到,我们可以添加包含多个字段的自定义输入。但在示例中,每个输入都没有“清除按钮”(如type =“text”)。

我创建了自己的custum输入(带有2个输入文本);我尝试将这些按钮添加到我的输入中,但它们不能正常工作。只识别一个输入;我知道为什么,但我不知道如何使它好。

我姓名的一部分(例如)

$.extend(Name.prototype, {
    /**
    Renders input from tpl

    @method render() 
    **/        
    render: function() {
       this.$input = this.$tpl.find('input');
       this.renderClear();
    },

    //render clear button
    renderClear:  function() {
       if (this.options.clear) {
            console.debug('clearBtn');

           this.$clear = $('<span class="editable-clear-x"></span>');
           this.$input.after(this.$clear)
                      .css('padding-right', 24)
                      .keyup($.proxy(function(e) {
                          //arrows, enter, tab, etc
                          if(~$.inArray(e.keyCode, [40,38,9,13,27])) {
                            return;
                          }                            

                          clearTimeout(this.t);
                          var that = this;
                          this.t = setTimeout(function() {
                            that.toggleClear(e);
                          }, 100);

                      }, this))
                      .parent().css('position', 'relative');

           this.$clear.click($.proxy(this.clear, this));
       }         
    },

    //show / hide clear button
    toggleClear: function(e) {
        if(!this.$clear) {
            return;
        }

        var len = this.$input.val().length,
            visible = this.$clear.is(':visible');

        if(len && !visible) {
            this.$clear.show();
        } 

        if(!len && visible) {
            this.$clear.hide();
        } 
    },

    clear: function() {
      console.debug('clearClick');
       this.$clear.hide();
       this.$input.val('').focus();
    },// .. other code here ..
    });

我可能需要在.after()之前使用.each(),但我不知道该怎么做。

我在插件的主要js中的Text类中找到了这个renderClear(和其他)方法。

感谢您的帮助。

0 个答案:

没有答案