5

次のjsfiddle http://jsfiddle.net/rniemeyer/8D5aj/の基本形式を使用しています

ko.bindingHandlers.hidden = {
    update: function(element, valueAccessor) {
        ko.bindingHandlers.visible.update(element, function() { return !ko.utils.unwrapObservable(valueAccessor()); });
    }        
};

ko.bindingHandlers.clickToEdit = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor(),
            link = document.createElement("a"),
            input = document.createElement("input");

        element.appendChild(link);
        element.appendChild(input);

        observable.editing = ko.observable(false);

        ko.applyBindingsToNode(link, {
            text: observable,
            hidden: observable.editing,
            click: observable.editing.bind(null, true)
        });

        ko.applyBindingsToNode(input, {
            value: observable,
            visible: observable.editing,
            hasfocus: observable.editing,
            event: {
                keyup: function(data, event) {
                    //if user hits enter, set editing to false, which makes field lose focus
                    if (event.keyCode === 13) {
                       observable.editing(false);
                       return false;
                    }
                    //if user hits escape, push the current observable value back to the field, then set editing to false
                    else if (event.keyCode === 27) {
                       observable.valueHasMutated();
                       observable.editing(false);
                       return false;
                    }

                }
            }
        });
    }
};

この質問からクリック可能なスパンを作成し、クリックしたときに値を編集できます。Enter キーを押すと、オブザーバブルが新しい値で更新されます。

Chrome では正常に動作しますが、Internet Explorer (10 9 または 8) で Enter キーを押すと、編集を開始する前の値に戻り、その理由がわかりません。IE が入力フィールドの Enter キーを処理してこれを機能させない固有の方法はありますか?また、回避策はありますか?

4

2 に答える 2

4

これは遅すぎるかもしれませんが、このエラーが発生したため、これを修正しました。

IE でこれが発生する理由は、false を返すだけでは、ブラウザーがフォーカスを失ったことをブラウザーに伝え、更新された値を取得するのに十分ではないためです。したがって、入力がフォーカスを失うように強制することで.blur()、正しい動作がトリガーされます。

ko.bindingHandlers.clickToEdit = {
    init: function (element, valueAccessor) {
        var observable = valueAccessor(),
            link = document.createElement("a"),
            input = document.createElement("input");
        link.classList.add('editField');

        element.appendChild(link);
        element.appendChild(input);

        observable.editing = ko.observable(false);

        ko.applyBindingsToNode(link, {
            text: observable,
            hidden: observable.editing,
            click: observable.editing.bind(null, true)
        });

        ko.applyBindingsToNode(input, {
            value: observable,
            visible: observable.editing,
            hasfocus: observable.editing,
            event: {
                keyup: function(data, event) {
                    //if user hits enter, set editing to false, which makes field lose focus
                    if (event.keyCode === 13) {
                        input.blur(); //force the input to lose focus
                        observable.editing(false);
                        return false;
                    }
                        //if user hits escape, push the current observable value back to the field, then set editing to false
                    else if (event.keyCode === 27) {
                        observable.valueHasMutated();
                        observable.editing(false);
                        return false;
                    }
                }
            }
        });
    }
}

フィドル: http://jsfiddle.net/KyleMuir/yTrkm/

お役に立てれば！

于 2013-10-22T22:43:39.737 に答える
0

入力フィールドを使用して同様のことをしていました。エンターキーを押したときに値を更新したかったのです。

https://jsfiddle.net/os4jcrmm/2/

Enter キーを処理するための小さな関数を追加しました。

function pfHandleEnter(loObject, loEvent) {
 if (loEvent.keyCode === 13) {
  loObject.blur();
   return false;
 }

 return true;
}

そして、それを onkeydown イベントに追加しました。

<input data-bind='value: ImageName' onkeydown='return pfHandleEnter(this, event);' />

于 2016-06-16T19:38:48.240 に答える