1

我做了一个可编辑的实现，其行为是：

dblclick 元素使其可编辑：

  • 创建了一个输入
  • 元素内容清空
  • 附加到元素的输入
  • 将 keydown 事件处理程序附加到输入，以在用户按 Enter 时禁用编辑
  • 带有模糊事件的同上

它在体面的浏览器中运行良好，但在 IE8 上会中断。

有两个问题：

  • input.focus()将调用模糊事件处理程序（wtf??）
  • 击键不会生成被 keydown 处理程序拦截的事件，所以我的处理程序在输入被击中时验证不起作用
  • 我检查了输入上的点击事件，它们很好

问题是，如果我在极简示例中运行示例，它仍然有效，但在我的应用程序中，它不会。

什么可以防止这些 keydown 事件被触发/捕获？

这是实现：

widget.Editable = function( el, options ) {
    this.element = $(el).addClass('editable');
    this.value = this.element.text();

    var _that = this;
    this.element.dblclick( function(e) {
        _that.enableEdition();
    } );
};

widget.Editable.prototype = {
    disableEdition: function( save, e ) {
        this.value = this.input.val();
        this.input.remove();
        this.element.text( this.value ).removeClass('dragDisable');
        this.editionEnabled = false;
        this.onupdate( e, this.value, this.element );
    },
    /**
     * enables the field for edition. Its contents will be placed in an input. Then
     * a hit on "enter" key will save the field.
     * @method enableEdition
     */
    enableEdition: function() {
        if (this.editionEnabled) return;
        var _that = this;
        this.value = this.element.text();
        this.input = $( document.createElement('input') ).attr({
            type:'text',
            value:this.value
        });
        this.element
            .empty().append( this.input )
            .addClass('dragDisable'); //We must disable drag in order to not prevent selection
        this.input.keydown( function(e) {
            IScope.log('keydown editable:', e );
            switch ( e.keyCode ) {
            case 13:
                _that.disableEdition( true );
                break;
            default:
                break;
            }
        } );
        this.input.click( function() {
            console.log('input clicked');
        });

        //if ( !YAHOO.env.ua.ie ) 
        //  this.input.blur( function( e ) {
        //      IScope.log( "editable blurred", e );
        //      _that.disableEdition( true );
        //  });

        //this.input.focus();
        this.editionEnabled = true;
    }
};
4

0 回答 0