Question

我有以下JSFiddle：https://jsfiddle.net/ta05jk3d/。

它包含一个contenteditable div和一个按钮。如果您在div中输入一些文本，则它是普通文本（不是粗体或带下划线或任何内容）。如果单击该按钮，文本“test”将以粗体添加到div中。

有什么问题？如果单击按钮，文本“test”将以粗体显示（这没关系），但如果您在粗体文本后输入文本，则所有其他文本也以粗体显示。

像这样：

一些文字...... 测试我在“测试”之后输入的其他文字现在也是粗体

我希望能够添加粗体文字，但仅限于单击按钮。我之后输入的文字可能是粗体，但只是普通文字，如下所示：

text ... 测试其他一些文字......

$('.button').on('click',function(e){ var content = $('.msg').html(); $('.msg').html(content+'<strong>test</strong>'); });

Answer 1

您需要在<strong>之后放置一个元素或节点，以便当焦点放回contenteditable元素时，浏览器会识别出光标应该在粗体内容之外：

$('.button').on('click', function(e) {
  var content = $('.msg').html();
  $('.msg').html(content + '<strong>test</strong>&nbsp;'); // note '&nbsp;'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="msg" style="border: 1px solid red; padding:10px;" contenteditable></div>
<button class="button">Add some text</button>

满意的默认造型

1 个答案: