jquery - execCommand 之后将焦点返回到 contenteditable?

标签 jquery contenteditable

我有以下代码演示 contenteditable 属性和一个按钮,该按钮将粗体文本注入(inject)到具有 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>

最佳答案

你应该使用.contents()

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

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

关于jquery - execCommand 之后将焦点返回到 contenteditable?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1316483/

相关文章:

javascript - 将文本框的值更改为其在可排序选项卡中的当前顺序

javascript - 如何从内容脚本访问事件选项卡的事件处理程序?

jquery - qTip2 的替代方案

javascript - Shadow DOM 中的内容可编辑?

javascript - JS函数获取元素的第n个字符的滚动量

jquery - 使下一个可编辑元素可编辑

javascript - 如果 <p contenteditable> 增长,则让 <div> 增长

javascript - 使 p 元素既可编辑内容又可排序 JQuery UI

javascript - contenteditable 不适用于 safari 但适用于 chrome

javascript - Mmenu 垂直子菜单 w/JQuery 切换