HTML 在可编辑元素中多个不可编辑的元素之间无法接收光标

新手上路,请多包涵

我现在做的是一个类似于HTML编辑器的工具。在 contenteditable=true 元素内,包含多个 contenteditable=false 的元素,两个不可编辑元素之间没有文本节点,这时候点击两个不可编辑元素之间,无法接收光标。用左右方向键移动光标,这两个不可编辑元素之间也无法接收光标。

CSS 代码:

.content-normal{
  height: 200px;
  border: 1px solid #ccc;
  white-space: pre-wrap;
  font-size: 14px;
}
.bold {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}
.tag {
  display: inline-block;
  font-size: 12px;
  margin-left: 1px;
  margin-right: 1px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 2px;
  color: #ffffff;
  background-color: #800080;
  font-family: apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}
.tag-open {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}
.tag-close {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

HMML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="content-normal" contenteditable="true">Total contract price (capital): <span contenteditable="false" class="tag tag-auto-close" tag-uid="1115_58_PlaceholderTag" title="<shape name=&quot;Line 5&quot;>">58</span><span class="style bold underline" style-uid="1115_59" style="font-family:楷体_GB2312;"><span contenteditable="false" class="tag tag-open" tag-uid="1115_59_StartTag" title="<cf font=楷体_GB2312 bold=True underline=single>">59</span><span contenteditable="false" class="tag tag-close" tag-uid="1115_59_EndTag" title="</cf>">59</span></span>RMB.</div>
</body>
</html>

在线演示

如何修复它呢?

阅读 2.3k
1 个回答
新手上路,请多包涵

我也遇到了,加了空格才显示

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题