Question

使用chrome，在将一个span标签添加到contenteditable div中的内容的一部分后，如果我将输入光标放在标记的部分之后，（通过单击并键入内容），新的字符始终附加在span标签内。

喜欢

<-span->[A](INPUT CURSOR HERE)<-/span->

我想将光标设置在span标签之外。

<-span->[A]<-/span->(INPUT CURSOR HERE)

以下是我的代码

$('button').click(function() {
  var html = $('div').text();
  $('div').html(html.replace(/\[A\]/g, '<span>[A]</span>'));
});

span {
  color: red
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>

<body>
  <div contenteditable=true>wwww[A]ooo</div>
  <button>color</button>
  <br>1, click the button to make '[A]' in div highlight by adding the span labels.<br> 2, click the div, set the input cursor just after '[A]'. type something.<br> 3, if you are using chrome, the new chars must be highlight. because the cursor is in
  the span labels. and if you are using firefox, it may be highlight or normal by chance. how can i move the cursor out of the span labels to input normal chars follow the span [A]?
</body>

</html>

怎么做？

如何在contenteditable div输入html标签

0 个答案: