Javascript 淘汰内容可编辑自定义绑定

Javascript 淘汰内容可编辑自定义绑定,javascript,knockout.js,contenteditable,Javascript,Knockout.js,Contenteditable,在本例中,为什么在我编写文本时div会丢失光标?如何修复此类行为?keyup事件正在触发并写入viewmodel,然后触发自定义绑定的更新功能。这是将innerHTML写回元素,这会使您失去焦点 一个简单的修复方法是检查update函数中的element.innerHTML是否已经与要设置它的值相同 可能希望将keydown更改为keyup,但除此之外,其他方法都非常有效=) 我注意到了两件事:1。确保数据绑定不在具有contenteditable属性的元素内。具有contenteditabl

在本例中,为什么在我编写文本时div会丢失光标?如何修复此类行为?

keyup事件正在触发并写入viewmodel,然后触发自定义绑定的更新功能。这是将innerHTML写回元素,这会使您失去焦点

一个简单的修复方法是检查update函数中的element.innerHTML是否已经与要设置它的值相同


可能希望将keydown更改为keyup,但除此之外,其他方法都非常有效=)


我注意到了两件事:1。确保数据绑定不在具有contenteditable属性的元素内。具有contenteditable的元素将不会触发键事件。2.若用户右键单击元素并粘贴文本,则不会更新值。还应指定单击事件。另外,如果使用“粗体”按钮,单击事件应该绑定到正文或类似的内容。使用焦点似乎适用于“粗体”单击事件和其他类似事件。registerEventHandler(元素“focus”,updateHandler);
ko.bindingHandlers.htmlValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        ko.utils.registerEventHandler(element, "keydown", function() {
            var modelValue = valueAccessor();
            var elementValue = element.innerHTML;
            if (ko.isWriteableObservable(modelValue)) {
                modelValue(elementValue);
            }
            else { //handle non-observable one-way binding
                var allBindings = allBindingsAccessor();
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue);
            }
        }
                                     )
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || "";
        if (element.innerHTML !== value) {
            element.innerHTML = value;
        }
    }
};
ko.utils.registerEventHandler(element, "keyup", function() {