return focus to contenteditable after execCommand?

Question

I have the following code demonstrating contenteditable property and a button that will inject bold text into the paragraph with contenteditable area. My question is how to retu

Answer 1

You may want to store the last clicked item in a variable and then call .focus() on it after the .execCommand has been executed. Something like this, I guess:

 $(function(){
        $('p.editable').click(function() {
            var clickedItem = $(this);
            clickedItem.attr('contenteditable', true).focus();
            $('#bold').click(function (){
                    document.execCommand('bold', false, true);
                    clickedItem.focus();
            });
        });
    });

This way you can also remove the "contenteditable" attribute from the markup...

HTH

Answer 2

You can just use the jQuery .focus() function to focus it. This should work:

var current;
$(function(){
    $("p[contenteditable]").focus(function() {
        current = this;
    });

    $('#bold').click(function (){
            document.execCommand('bold', false, true);
            $(current).focus();
    });
});

This just keeps track of the currently editing field every time it is focused by the user, and when the bold button is clicked focus is set back to that field.

Answer 3

HTML:

<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

JavaScript:

function doRichEditCommand(aName, aArg){
    getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
    document.getElementById('editorWindow').contentWindow.focus()
}

Refer this may help you:

https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

Answer 4

If you're in an iframe, call focus() on the default view.

myiframedocument.execCommand('Bold',false,null);
myiframedocument.defaultView.focus();

Answer 5

YOU SHOULD USE .contents()

var current;
$(function(){
    $("p[contenteditable]").focus(function() {
        current = this;
    });

    $('#bold').click(function (){
            document.execCommand('bold', false, true);
            $(current).contents().focus();
    });
});