Question

我有以下代码演示了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

您可能希望将最后点击的项目存储在变量中，然后在 .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 4

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 5

如果您在iframe中，请在默认视图上调用focus（）。

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

execCommand后返回焦点到contenteditable？

5 个答案: