我的情况涉及 KnockoutJS 和 jwysiwyg 插件(https://github.com/jwysiwyg/jwysiwyg)。我正在使用下面看到的自定义绑定。但是,每当用户将文本更新到第二行时,通过绑定更新内容会导致光标重置到编辑器的最开头。因此,每当用户在更新后暂停输入超过 1 秒时,他们就会被迫点击回到之前的位置以继续。
ko.bindingHandlers.wysiwyg = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().wysiwygOptions || {};
var value = ko.utils.unwrapObservable(valueAccessor());
var $e = $(element);
$.extend(true, {
initialContent : value
}, options);
$e.wysiwyg(options);
//handle the field changing
function detectFn() {
var observable = valueAccessor();
var newvalue = $e.wysiwyg("getContent");
observable(newvalue);
}
var current = $e.wysiwyg('document');
var timer;
current.bind({
keyup: function(){
clearTimeout(timer);
timer = setTimeout(detectFn, 1000);
}
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$e.wysiwyg('destroy');
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).wysiwyg("setContent", value);
ko.bindingHandlers.value.update(element, valueAccessor);
}
};
(这个绑定然后被这个使用)
<textarea data-bind="wysiwyg: yourViewModelValue"></textarea>
更新完成后如何获取插入符号位置以恢复光标?或者还有什么其他解决方案可以在更新时强制光标不移动?
编辑:一个 jsfiddle 来演示这个问题。 http://jsfiddle.net/797ZL/ 请注意当您在第二行或之后键入时会发生什么,然后暂停一秒钟,导致光标重置。