Question

我有一个标题输入字段和一个tinymce4 textarea。

在tinymce init中我定义了模糊和焦点事件监听器（coffescript）。

  tinymce.init(
    $.extend {}, tinyMceDefaultConfig,
      editor_selector:"tinymce-question"
      setup: (editor) ->
        editor
          .on 'init', (e).....
          .on 'focus', ->
            console.log('focus')
          .on 'blur', ->
            console.log('blur')

当我进入tinymce textarea字段时，它仅触发焦点事件。工作正常。

但是当我从标题输入字段转到tinymce（使用鼠标事件）时，它会触发焦点和模糊事件。

为什么呢？或者我该如何避免这种情况？

更新：

这是一个例子。这是一个错误吗？

当我点击textarea时，只有焦点开始了。当我在输入字段中然后单击进入textarea时，焦点和模糊火焰。

  <html>
  <head><!-- CDN hosted by Cachefly -->
    <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script>
      tinymce.init({
        selector:"textarea",
        setup: function(editor) {
          editor.on('focus', function() {
            console.log('focus');
          });
          editor.on('blur', function(){
            console.log('blur');
          })
        }
      });
    </script>
  </head>
  <body>
    <input type="text" name="fname">
    <textarea>Your content here.</textarea>
  </body>
  </html>

JSFIDDLE

更新

Updated JSFIDDLE

现在焦点被解雇了一次，但模糊不再发射了。

UPDATE2：

我知道，此问题仅出在Chrome中。在Firefox和Safari中，它可以正常工作。

UPDATE3：

它是用实际的Nightly版本修复的。我不知道它将合并到哪个版本。

Answer 1

 <style type="text/css">
   .editor_active { border:#f00 2px solid!important; }
   .editor_inactive { border:#00f 2px dashed!important; }
</style>


<script type="text/javascript">

tinymce.init({
    selector:"textarea",
    setup: function(editor) {
        editor.on('focus', function(e) {
            if(!catching)
            {
                bounceProtect('focus');
            formatMce('focus');
            }
        });
        editor.on('blur', function(e){
            if(!catching){
                bounceProtect('blur');
            formatMce('blur');
            }
        })
    }
});

function formatMce(state)
{
    if (state=='focus') {
       $('#mceControl').addClass('editor_active').removeClass('editor_inactive');
    }
    else {
       $('#mceControl').addClass('editor_inactive').removeClass('editor_active');
    }
}

function bounceProtect(src)
{
    catching = true;
    console.log(src);
    setTimeout(function(){ catching = false;}, 250);
}

var catching = false;

$(document).ready(function(){
$("INPUT,TEXTAREA,BUTTON").focus(function(){ formatMce('blur'); });
});

</script>


</head>
<body style="">

  <input type="text" id="fname" name="fname">
  <div id="mceControl">
    <textarea>Your content here.</textarea>
  </div>

更新：1 看起来有分层的控件专注于你 - 这是我们过去常用于VB应用程序的技术，以防止焦点战争和避免键反弹 - 250毫秒延迟应该过滤掉无意的焦点转移，但玩它。

更新：2 我已将tinyMCE控件包装在div中，并将一些代码添加到编辑器焦点/模糊处理程序中以进行样式化，您将不会对IFrame中加载的内容产生任何影响。

更新：3 文档之间的焦点/模糊工作，但是当你从tinyMCE转到输入控件时焦点事件没有触发，一个肮脏的黑客是捕获INPUT焦点事件并在编辑器上模拟模糊。

Answer 2

它是用实际的Nightly版本修复的。我不知道它将合并到哪个版本。

当用户从其他输入字段跳转时，为什么TinyMCE会获得焦点和模糊事件？

2 个答案: