Question

我正在使用以下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;
                    }

                }
            }
        });
    }
};

从this question创建可点击的范围，然后您可以编辑单击它时的值。当您按Enter键时，它应该使用您的新值更新observable。

它在chrome中工作正常，但是当你点击Enter时，在Internet Explorer（10 9或8）中，该值将恢复为开始编辑之前的值，我无法弄清楚原因。 IE是否有一些固有的方式来处理输入字段中的输入键，使其不起作用，是否有解决方法？

Answer 1

这可能为时已晚，但我遇到了这个错误，这就是我修复它的方法。

在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/

希望这有帮助！

Answer 2

我正在使用输入字段做类似的事情。我想在输入回车键时更新值。

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

添加了很少的功能来处理输入键。

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);' />

Knockout JS内联编辑在Internet Explorer中无法捕获Enter Key

2 个答案: