在execCommand后返回焦点到contenteditable？

我有以下代码演示contenteditable属性和一个按钮，将带有contenteditable区域的段落插入到粗体文本。我的问题是如何将焦点返回到我点击粗体后停止的位置，如果突出显示某些文本，然后单击粗体，则会将这些文本加粗，但焦点将不再存在。如果您不选择任何内容并单击粗体，同样的事情会发生，重点将消失，如果您再次点击从哪里离开，则可以键入粗体文本。在execCommand后返回焦点到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>

来源

2009-08-22 FurtiveFelon

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

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

来源

2009-09-11 11:55:14 ALFABreezE

这会在每次单击段落时将操作绑定到'＃bold'的单击事件，从而导致多次绑定处理程序。你不想那样。 – Jake 2010-06-30 04:11:42

增加了'.editable'类，所以它只绑定到标记中指定的那个类。 – ALFABreezE 2011-09-06 14:50:23

每次你点击一个pedable时，一个处理器将被绑定#bold。当你点击#bold时，所有这些将被触发，导致execCommand被多次运行，并且聚焦跳过所有已被点击的pedables。 devongovett给出的答案不会遇到这个问题，因为#bold处理程序只绑定一次。 – Jake 2011-09-11 21:57:50

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

来源

2009-09-16 14:55:00

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

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

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

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

来源

2009-11-27 00:37:28 devongovett

您应该使用.contents（）

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

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

来源

2010-07-22 02:56:35 fukid

谢谢，这有助于！ – 2010-08-28 15:49:16

.contents（）调用的原因是什么？ – xec 2012-04-23 14:37:56

不知道为什么'.contents（）'是必需的，但它可以正常工作，而直接调用'.focus（）'不会。福基，你能解释一下吗？ – FeifanZ 2013-12-28 15:34:06

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

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

来源

2012-01-18 00:29:08

在execCommand后返回焦点到contenteditable？

回答

相关问题