Knockout JS edycji inline nie złapać Enter w Internet Explorer

Question

Używam podstawową formę następującej 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; 
        } 

       } 
      } 
     }); 
    } 
}; 

od this question stworzyć klikalny przęsło, które można następnie edytować, gdy wartość to klikniesz. Po naciśnięciu enter powinno zaktualizować obserwowalne z nową wartością.

Działa dobrze w chrome, ale w przeglądarce Internet Explorer (10 9 lub 8) po naciśnięciu enter, wartość powraca do wartości, która była przed rozpoczęciem edycji i nie mogę zrozumieć dlaczego. Czy istnieje jakiś nieodłączny sposób, w jaki IE obsługuje klucz Enter w polu wejściowym, które sprawia, że ​​to nie działa i czy istnieje obejście?

Answer 1

Może być za późno, ale napotkałem ten błąd i tak to naprawiłem.

Powodem, dla którego dzieje się to w IE, jest to, że zwrócenie wartości false nie wystarczy, aby poinformować przeglądarkę, że straciło fokus i pobrać zaktualizowaną wartość. Tak więc, zmuszając wejście do utraty koncentracji, .blur() wyzwala prawidłowe zachowanie.

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/

Nadzieja to pomaga!

Answer 2

Robiłem coś podobnego za pomocą pola wprowadzania. Chciałem zaktualizować wartość po naciśnięciu klawisza Enter.

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

Dodano małą funkcję obsługiwać enter.

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

return true; 
} 

Dodano go do wydarzenia onkeydown.

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