All geek questions in one place

Why does TinyMCE get focus and blur when the user moves from another input field?

I have a header input box and a tinymce4 text box.

In tinymce initialization, blur and focus event listeners (coffescript) are defined.

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 to the tinymce text area field, it only triggers focus . It works great.

But when I move from the header input field to tinymce (with mouse event), it triggers focus and blur .

Why? Or how to avoid this?

UPDATE

Here is an example. This is mistake?

When I click on the text box, only the focus fires. When I am in the input field, then click in the textarea, focus and blur area.

  <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

Focus fires once, but blurring no longer fires.

UPDATE2:

I see this problem only in Chrome. It works great on Firefox and Safari.

Update3:

It is fixed using the actual Nightly assembly. I do not know in which version it will be combined.

+4
source share
2 answers

It is fixed using the actual Nightly assembly. I do not know in which version it will be combined.

0
source 
  <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 seems like multi-level controls are focused on you - this is the technique we used to use in VB applications to prevent focus wars and avoid key bounces. A delay of 250 ms should filter out unintentional changes in focus, but play with it.

UPDATE: 2 I wrapped the tinyMCE control in a div and added some code to the focus / blur handler of the style editor that would have no effect on the material loaded in the IFrame.

UPDATE: 3 Focus / blur between documents worked, but the focal event didn’t work when you switched from tinyMCE to input control, a dirty hack is to capture INPUT background events and emulate the blur in the editor.

+2
source

Source: https://habr.com/ru/post/1501272/

More articles:


All Articles