Question

当我专注于输入，textarea或CKeditor实例时，我试图在我的body标签中添加一个类。当我从任何这些模糊时，删除该类。问题是，当我从CKeditor实例模糊并立即关注输入或textarea时，焦点事件发生在模糊事件之前。从CKeditor实例模糊时会有明显的延迟。我已经尝试过使用delay（）和setTimeout（）以及许多其他东西，我无法让它工作。由于在我聚焦后它会模糊，焦点事件是将类添加到正文，然后模糊事件正在删除该类。

我这样做是因为当用户在键盘显示的移动设备上时，我需要重新定位标题并隐藏页脚。以下是我目前的代码。有没有人对如何解决这个问题有任何想法？谢谢！

 if ($("html").hasClass("touch")) {

 // Set focus and blur listeners for all editors to be created.  
 CKEDITOR.on( 'instanceReady', function() {

      var editor = txtEditor.get_instance();      

      editor.on('focus', function(e) {
      $("body").addClass(fix);
      });

      editor.on('blur', function(e) {
      $("body").removeClass(fix);
      });
    });

    $("input").on("focus", function(e) {
      $("body").addClass(fix);  
    })
    .on("blur", function(e) {
      $("body").removeClass(fix);
    });
 }

Answer 1

延迟是由focus manager引起的。它等待200ms以使下一个编辑器UI组件获得焦点。它必须等待，因为在各种情况下并且取决于浏览器，焦点可以从一个组件（例如可编辑元素）移动到具有显着延迟的另一个组件（工具栏，元素路径，对话框）。根据我自己的经验，我知道它甚至可以超过100毫秒。如果没有等待editor#blur和editor#focus事件在编辑器中工作时会被多次触发。

在您的情况下，input元素应该像编辑器的UI组件一样。如果它得到焦点，那么当编辑器获得焦点时也应如此，反之亦然。我认为最简单的解决方案是将其注册为编辑器的UI组件：

CKEDITOR.on('instanceReady', function() {
    var editor = txtEditor.get_instance();

    editor.focusManager.add(new CKEDITOR.dom.element(inputEl));

    editor.on('focus', function(e) {
        $("body").addClass(fix);
    });

    editor.on('blur', function(e) {
        $("body").removeClass(fix);
    });
});

Answer 2

感谢您的反馈，但我明白了。我能够在输入字段的焦点语句中放置editor.focusManager.forceBlur（）语句。这样，来自任何先前的ckeditor的模糊是立竿见影的。再次感谢！

杰西

CKEDITOR模糊时为什么会有延迟？我可以解决它吗？

2 个答案: