1

編集可能な実装を作成しました。動作は次のとおりです。

要素を dblclick すると編集可能になります。

  • 入力が作成されます
  • 要素の内容が空になりました
  • 要素に追加された入力
  • ユーザーが Enter キーを押したときに編集を無効にするために、keydown イベント ハンドラーを入力にアタッチします。
  • ぼかしイベントと同じ

まともなブラウザーでは問題なく動作しますが、IE8 では機能しません。

2 つの問題があります。

  • input.focus()ぼかしイベント ハンドラーを呼び出します (wtf??)
  • キーストロークはキーダウンハンドラーによってインターセプトされたイベントを生成しないため、Enter キーが押されたときに検証するハンドラーは機能しません
  • 入力でクリックイベントを確認しましたが、問題ありません

問題は、サンプルを最小限のサンプルで実行しても機能しますが、私のアプリケーションでは機能しません。

これらのキーダウンイベントが発生/キャッチするのを防ぐものは何ですか?

実装は次のとおりです。

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