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

2023年11月6日 413次阅读

我有一个标题输入字段和一个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版本一起修复.我不知道它将合并到哪个版本.

最佳答案

 <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焦点事件并在编辑器上模拟模糊.

点赞