Knockout JS Inline-Editing nicht fangen Key im Internet Explorer Geben Sie

Question

ich die Grundform der folgenden 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; 
        } 

       } 
      } 
     }); 
    } 
}; 

von this question bin mit einem klickbaren Spanne zu erstellen, die Sie dann den Wert bearbeiten können, wenn Sie klicken darauf. Wenn Sie Enter drücken, sollte das Observable mit Ihrem neuen Wert aktualisiert werden.

Es funktioniert gut in Chrom, aber in Internet Explorer (10 9 oder 8), wenn Sie die Eingabetaste drücken, wird der Wert auf den Wert zurückgesetzt, bevor Sie es bearbeitet haben und ich kann nicht herausfinden, warum. Gibt es eine inhärente Art und Weise, in der der IE die Eingabetaste in einem Eingabefeld anwendet, was dazu führt, dass dies nicht funktioniert, und gibt es einen Workaround?

Answer 1

Das könnte zu spät sein, aber ich habe diesen Fehler festgestellt und so habe ich es behoben.

Der Grund, warum dies in IE geschieht, ist, weil das Zurückgeben von false nicht ausreicht, um dem Browser mitzuteilen, dass es den Fokus verloren hat und den aktualisierten Wert abrufen. Wenn Sie also die Eingabe zwingen, den Fokus zu verlieren, löst das das korrekte Verhalten aus.

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/

hoffe, das hilft!

Answer 2

Ich machte etwas ähnliches mit einem Eingabefeld. Ich wollte den Wert aktualisieren, wenn ich die Eingabetaste drücke.

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

kleine Funktion hinzugefügt Schlüssel zu handhaben eingeben.

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

return true; 
} 

Und es zum Onkeydown-Ereignis hinzugefügt.

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