Fatal编程技术网
  • jquery/
  • Jquery 当用户从其他输入字段跳转时，为什么TinyMCE会获得焦点和模糊事件？

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

jquery events coffeescript tinymce

Jquery 当用户从其他输入字段跳转时，为什么TinyMCE会获得焦点和模糊事件？,jquery,events,coffeescript,tinymce,tinymce-4,Jquery,Events,Coffeescript,Tinymce,Tinymce 4,Im有一个标题输入字段和一个tinymce4文本区域 在tinymce init中，我定义了模糊和聚焦事件侦听器（coffescript） 当我进入tinymce textarea字段时，它只触发聚焦事件。很好 但是当我从title输入字段转到tinymce（使用鼠标事件）时，它会触发聚焦和模糊事件 为什么?？或者我该如何避免这种情况 更新： 这里有一个例子。是虫子吗 当我点击文本区域时，只有焦点被触发。当我在输入字段中，然后点击文本区域时，焦点和模糊会触发 <html> &

Im有一个标题输入字段和一个tinymce4文本区域

在tinymce init中，我定义了模糊和聚焦事件侦听器（coffescript）

当我进入tinymce textarea字段时，它只触发聚焦事件。很好

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

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

更新：

这里有一个例子。是虫子吗

当我点击文本区域时，只有焦点被触发。当我在输入字段中，然后点击文本区域时，焦点和模糊会触发

  <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>


tinymce.init({
选择器：“文本区域”，
设置：函数（编辑器）{
on（'focus'，function（）{
console.log（'focus'）；
});
on（'blur'，function（）{
console.log（'blur'）；
})
}
});
你的内容在这里。

更新：

焦点现在发射一次，但模糊不再发射

更新2:

我明白了，这个问题只存在于Chrome中。在Firefox和Safari中运行良好

更新3:

这是固定的实际夜间建设。我不知道它将合并到哪个版本。



 <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>


.editor_活动{边框：#f00 2px实心！重要；}
.editor_非活动{边框：#00f 2px虚线！重要；}
tinymce.init({
选择器：“文本区域”，
设置：函数（编辑器）{
编辑者。关于（'focus'，函数（e）{
如果（！捕捉）
{
反弹保护（“焦点”）；
formatMce（“焦点”）；
}
});
编辑器.on（'blur'，函数（e）{
如果（！捕捉）{
防弹保护（“模糊”）；
formatMce（'blur'）；
}
})
}
});
函数formatMce（状态）
{
如果（状态=='focus'）{
$（'mceControl'）.addClass（'editor'u active'）.removeClass（'editor'u active'）；
}
否则{
$（'mceControl'）.addClass（'editor'u active'）.removeClass（'editor'u active'）；
}
}
功能弹跳保护（src）
{
捕捉=真；
console.log（src）；
setTimeout（函数（）{catching=false；}，250）；
}
var=false；
$（文档）.ready（函数（）{
$（“输入，文本区域，按钮”）.focus（函数（）{formatMce（'blur'）；}）；
});
你的内容在这里。
更新：1 看起来好像有分层控件在你身上玩焦点游戏-这是我们在VB应用程序中用来防止焦点争夺和避免键反弹的一种技术-250毫秒的延迟应该会过滤掉非故意的焦点转移，但可以随意使用

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

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

它是通过实际的夜间构建修复的。我不知道它将合并到哪个版本。

你能提供一个小提琴的例子吗，我不确定我是否理解你的意思。我有这个确切的问题！Afaik tinymce在iframe中运行。您是否尝试将iframe文档上的事件绑定到给定的编辑器变量上？看起来像是bug，但为了避免内部事件，只需检查控件的节点类型，如果它的输入类型比忽略其他类型继续…似乎工作得更好，但编辑器仍然难以模糊，特别是当直接切换到另一个输入时，模糊会发生什么？你能用更多的信息更新你的问题吗？我在焦点上添加了一个类，在模糊上删除了它，它只是添加了一个边框来显示它被选中：$（'.mce edit area'）.addClass（'editor_active'）；和$（'.mce edit area'）.removeClass（'editor_active'）； 
 <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>