Knockout JS chỉnh sửa nội tuyến không bắt Nhập chính trong Internet Explorer

Question

Tôi đang sử dụng các hình thức cơ bản trong các cách sau 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; 
        } 

       } 
      } 
     }); 
    } 
}; 

từ this question để tạo ra một khoảng có thể nhấp, sau đó bạn có thể chỉnh sửa giá trị của khi bạn bấm vào nó. Khi bạn nhấn enter nó sẽ cập nhật các quan sát với giá trị mới của bạn.

Nó hoạt động tốt trong chrome, nhưng trong internet explorer (10 9 hoặc 8) khi bạn nhấn enter, giá trị trả về giá trị trước khi bạn bắt đầu chỉnh sửa và tôi không thể hiểu tại sao. Có một số cách vốn có mà IE xử lý các phím enter trong một lĩnh vực đầu vào mà làm cho điều này không làm việc, và là có một công việc xung quanh?

Answer 1

Điều này có thể đã quá muộn, nhưng tôi đã gặp lỗi này và đây là cách tôi đã khắc phục sự cố.

Lý do tại sao điều này xảy ra trong IE là do trả về false không đủ để cho trình duyệt biết rằng nó đã bị mất tiêu điểm và lấy giá trị cập nhật. Vì vậy, bằng cách buộc đầu vào mất tiêu điểm .blur() sẽ kích hoạt hành vi đúng.

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!

Answer 2

Tôi đã làm điều gì đó tương tự bằng cách sử dụng trường nhập. Tôi muốn giá trị cập nhật khi tôi nhấn phím enter.

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

Đã thêm một hàm nhỏ để xử lý phím enter.

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

return true; 
} 

Và thêm nó vào sự kiện onkeydown.

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