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 return focus to where i left off after clicking on bold, if you highlight some text, and click bold, it'll bold those text, but the focus will not be there anymore. Same thing happens if you don't select anything and click bold, the focus will be gone and if you click where you left off again, you can type bold texts.

Thank you very much for your help!

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#bold').click(function (){
            document.execCommand('bold', false, true);
        });
    });
    </script>
</head>
<button id="bold">Bold</button>
<div id="container">
<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>

<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>

score 9 · Answer 1 · answered Jul 22 '10 at 02:56

9

YOU SHOULD USE .contents()

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

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

answered Jul 22 '10 at 02:56

fukid

115
1
3

8

why the .contents() call ? – xec Apr 23 '12 at 14:37
Don't know why `.contents()` is required, but it works whereas directly calling `.focus()` doesn't. fukid, can you explain? – FeifanZ Dec 28 '13 at 15:34

score 4 · Answer 2 · answered Nov 27 '09 at 00:37

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.

ALFABreezE · Answer 3 · 2011-09-06T14:44:49.723

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

edited Sep 06 '11 at 14:44

answered Sep 11 '09 at 11:55

ALFABreezE

57
6

3

This will bind the action to the click event of `#bold` every time you click a paragraph, resulting in the handler being bound multiple times. You don't want that. – Jake Jun 30 '10 at 04:11
Added class `.editable`, so it only binds to paragraph with that class specified in the markup. – ALFABreezE Sep 06 '11 at 14:50
Every time you click a p.editable a handler will be bound #bold. When you click #bold all these will be fired resulting in execCommand being run multiple times and focus jumping around all the p.editables that have been clicked. The answer devongovett gave does not suffer from this problem because the #bold handler is bound only once. – Jake Sep 11 '11 at 21:57

score 1 · Answer 4 · edited Jan 13 '11 at 20:32

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

score 0 · Answer 5 · answered Jan 18 '12 at 00:29

0

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

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

answered Jan 18 '12 at 00:29

Adam Pierce

33,531
22
69
89

return focus to contenteditable after execCommand?

5 Answers5

Linked