将execCommand后返回焦点CONTENTEDITABLE？(return focus to

我有以下的代码演示CONTENTEDITABLE财产和一个按钮，将注入大胆的文字与CONTENTEDITABLE区的段落。我的问题是如何将焦点返回到我点击大胆，如果突出显示一些文本后离开的位置，然后单击大胆，它会大胆的文字，但重点将不存在了。同样的事情发生，如果你不选择任何内容，然后单击大胆，重点将消失，如果你点击，你再离开，您可以键入文本加粗。

非常感谢您的帮助！

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

Answer 1:

您应该使用.contents（）

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

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

Answer 2:

你可以使用jQuery的.focus（）函数来关注它。这应该工作：

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

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

这只是跟踪每次被用户关注时间的当前编辑的字段，并单击加粗按钮时，焦点将重新设置该字段。

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()
}

请参阅本可以帮助你：

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

Answer 4:

您可能要到最后单击项目存储在一个变量，然后.execCommand执行后调用.focus（）就可以了。像这样的事情，我想：

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

这样，您还可以删除"contenteditable"从标记属性...

HTH

Answer 5:

如果你在一个iframe的时候，调用焦点（）的默认视图。

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

文章来源: return focus to contenteditable after execCommand?