Why TinyMCE get focus and blur event, when user jump from other input field?

Question

Im have a title input field and an tinymce4 textarea.

In the tinymce init i defined blur and focus event listeners (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')

When i go into the tinymce textarea field, it fire only focus event. Works fine.

But when i go from the title input field to the tinymce (with mouse event), it fire focus and blur events.

Why? Or how do I avoid this?

UPDATE:

Here an example. Is it a bug?

When I click into the textarea only the focus fired. When I am in the input field and then click into the textarea, focus and blur fires.

  <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

UPDATE:

Updated JSFIDDLE

The focus fired now one time, but the blur do not fire anymore.

UPDATE2:

I see, this problem is only in Chrome. In Firefox and Safari it works fine.

UPDATE3:

It is fixed with the actual Nightly build. I dunno in which version it will be merged.

Could you provide an example fiddle, I'm not sure I understand what you mean. — Christoffer Bubach
Afaik tinymce runs in an iframe. Did you try to bind the events on the document of the iframe instead on the given editor var? — mat
it looks like bug but to avoid that inside event just check node type of control , if its of type input than ignore else go on.... — Vishal Sharma

web_bod web_bod · Accepted Answer · 2013-10-29T23:22:53

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

UPDATE: 1 It looks like there are layered controls juggling focus on you - this is a technique we used to use in VB apps to prevent focus wars and avoid key bounces - the 250msec delay should filter out un-intentional focus shifts, but play around with it.

UPDATE: 2 I've wrapped the tinyMCE control in a div and added some code to the editor focus/blur handlers to style that, you won't have any influence over stuff loaded in the IFrame.

UPDATE: 3 Focus/Blur between documents worked, but the focus event wasn't firing when you went from tinyMCE to an input control, a dirty hack is to capture INPUT focus events and emulate a blur on the editor.

Why TinyMCE get focus and blur event, when user jump from other input field?

2 Answers