Knockout JS inline editing doesn't catch Enter Key in Internet Explorer

Question

I am using the basic form of the following 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;
                    }

                }
            }
        });
    }
};

from this question to create a clickable span that you can then edit the value of when you click it. When you hit enter it should update the observable with your new value.

It works fine in chrome, but in internet explorer (10 9 or 8) when you hit enter, the value reverts to the value it was before you started editing it and I can't figure out why. Is there some inherent way that IE handles the enter key in an input field that makes this not work, and is there a work-around?

apparently IE does not trigger the change event on the input field when you hit enter even if it has been edited. if I manually trigger it in the keyup event handler it behaves how I expect in IE. — noah, May 22 '13 at 20:16

Kyle Muir · Answer 1 · 2013-10-23T08:35:54.587

This may be too late, but I encountered this error and this is how I fixed it.

The reason why this happens in IE is because returning false isn't enough to tell the browser that it has lost focus and to grab the updated value. So, by forcing the input to lose focus .blur() triggers the correct behaviour.

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;
                    }
                }
            }
        });
    }
}

Fiddle: http://jsfiddle.net/KyleMuir/yTrkm/

Hope this helps!

score 0 · Answer 2 · answered Jun 16 '16 at 19:38

I was doing something similar using an input field. I wanted the value to update when I hit the enter key.

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

Added little function to handle enter key.

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

 return true;
}

And added it to the onkeydown event.

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

Knockout JS inline editing doesn't catch Enter Key in Internet Explorer

2 Answers2