Opened 11 years ago

Closed 11 years ago

#10740 closed Bug (invalid)

Blur and Focus events are unpredictable (and therefore unusable)

Reported by: Nora Owned by:
Priority: Normal Milestone:
Component: Core : Focus Version:
Keywords: Cc:


I'm using outputHTML (in case that matters) and wanted to put in placeholder text in the CKEditor on blur and then remove it on focus. However, clicking in the CKEditor was not consistently firing the focus event and clicking outside was not consistently firing the blur event. I tried capturing blur from the editor, the document, the iFrame, and no combination would always fire focus when I clicked in and always fire blur when I clicked out.

Attachments (1)

messageEntry_config.js (6.0 KB) - added by Nora 11 years ago.

Download all attachments as: .zip

Change History (5)

comment:1 Changed 11 years ago by Piotrek Koszuliński

Component: Core : Undo/RedoCore : Focus
Keywords: blur focus removed
Status: newpending
Version: 4.2
  1. What is outputHTML?
  2. How do you put placeholder text? Could you share some code?
  3. On which browsers and how exactly are you testing this?

To be able to verify your bug report I need to have very precise answers. Especially if you use non-editable elements (with contenteditable="false") browsers can make you a lot of problems with focus/blur because they are very buggy here.

comment:2 Changed 11 years ago by Jakub Ś

What is outputHTML?

This is probably outputHtml sample

@norabora we have some issues with focus/blur events:

  1. Could you check if this is one of the issues?
  2. If not could you please provide simplified HTML file that will show this problem?

I'm talking about something that can be put samples folder, will work and show the problem.

Changed 11 years ago by Nora

Attachment: messageEntry_config.js added


comment:3 Changed 11 years ago by Nora

A1. j.swiderski is correct. I only mention it because in another bug I filed, that turned out to be the cause so I just wanted to make sure that's known straight off.

A2. Sure.

config : {
    extraPlugins : "insertReference,,upload,enterBehavior",
    toolbar: [
        { name: 'basicstyles',  items : [ 'Bold','Italic','Underline','-','RemoveFormat' ] },
        { name: 'links',        items : [ 'Link','Unlink','-','InsertReference'] },
        { name: 'upload',       items : [ 'Upload' ] }
    height: '60px'
setupCKEditorInstance: function() {
    var config = {
       customConfig : 'custom/messageEntry_config.js',
       language : I18N.getLocale().replace(/_/g, '-'),
       extraPlugins : this.config.extraPlugins,
       toolbar : this.config.toolbar,
       height : this.config.height

    this.editor = CKEDITOR.replace(this.$([0], config);
    this.editor.on("instanceReady", function() {
        if(this.model.isMessage() && this.editor.readonly) {
    }, this);
    this.editor.on("contentDom", this.setupCKEditorEventHandlers);
 * Various combinations of the following blur and focus listeners were used
setupCKEditorEventHandlers: function() {
    this.editor.editable().on('focus', this.focusHandler);
    this.editor.editable().on('blur', this.blurHandler);
    this.editor.document.on('click', this.focusHandler);
    this.editor.document.on('focus', this.focusHandler);
    this.editor.document.on('blur', this.blurHandler);
    this.$el.on('blur', this.blurHandler);
    this.editor.on('focus', this.focusHandler);
    this.editor.on('blur', this.blurHandler);
    this.editor.on('insertText', this.blurAfterPromptTextInsert);
focusHandler: function(event) {
    if(this.isPromptText()) {
blurHandler: function(event) {
    if(this.model.isMessage() && this.editor.getSnapshot() === "") {
showPromptText: function() {
blurAfterPromptTextInsert: function() {
isPromptText: function() {
    var editorText = this.editor.getSnapshot().replace(/<br\s*[\/]?>/gi,"\n").replace(/&nbsp;/g), " ");
    return (editorText !== "") && (editorText === this.options.promptText);

I'm using Backbone.js which is where this.$el comes from (it's just the div container of the CKEditor, sort of a last ditch attempt to get the events). setupCKEditorInstance is called in the initialize function (not shown) after the template is rendered.

A3. Chrome (most recent). I open a page where I have a CKEditor instance and the instance immediately gets focus with no prompt text set. Then I click out of the editor. Sometimes this causes the promptText to be set, sometimes it doesn't. When it does, I'll click back in the editor, and sometimes this will cause promptText to go away, sometimes it doesn't. The behavior is super inconsistent.

B1. None of those are really what I'm doing/seeing.

B2. I'll try and come up with something.

comment:4 Changed 11 years ago by Piotrek Koszuliński

Resolution: invalid
Status: pendingclosed

You should not listen on some elements' focus and blur events. As you found - browsers will not let you easily find out when editor was focused and when blurred.

Listening for editor#focus and #blur should be enough, because there are known only minor issues related to them.

You should also avoid calling this.editor.focusManager.blur(); if you're not really blurring editor, because you'll break its focus/blur state. If you want to blur editor, then you need to move focus somewhere else.

I'm closing this issue now as invalid, but if you'll still have issues after taking into account my tips, then feel free to open next ticket.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy