Question

关于contenteditable = "true"，我要使其无法删除.icon。（.Icon始终排在最后。）

我正在尝试以下代码。

<h2>
  <span class="txt" contenteditable="true">World</span>
</h2>

<h2>
  <span class="txt" contenteditable="true">Hello<span class="icon" contenteditable="false">★</span></span>
</h2>

<style>
h2 {
    word-break: break-all;
}
span.txt {
    border-bottom: 1px solid black;
    cursor: text;
    width: 100%;
    height: 100%;
    display: inline-block;
}
</style>

<script>
document.addEventListener ('click', event=> {
  let selection = event.view.getSelection();
  let target = event.target;
  let doc = target.ownerDocument;
  let icon = target.closest ('.icon');

  if (icon) {
    let e = icon.previousSibling;
    if (e) {
      let range = doc.createRange ();
      let len = e.length;
      range.setStart (e, len);
      range.setEnd (e, len);
      selection.removeAllRanges ();
      selection.addRange (range);
    }
  }
}, false);
</script>

示例：https://jsfiddle.net/46fjdaxz/

以上代码使无法删除.icon。

在“世界区域”中，单击任何地方都会显示插入符号，但是在“ Hello区域”后面单击时不会显示插入符号。

如何在“您好”区域显示插入符号？

在此先感谢您的帮助。

Answer 1

即使在您的代码中，我也可以删除图标：只需单击图标后并按退格键，该图标对我便已删除。

但是出于您的目的，我可以建议您这样做： https://jsfiddle.net/bardc04j/

只需将可编辑部分与不可编辑部分分开

<h2>
  <span class="txt" contenteditable="true">Hello</span>
  <span class="icon" contenteditable="false">★</span>
</h2>

我也删除了您的CSS，将图标放在文本旁边。

希望能提供帮助。

根据条件改变光标（尖号）位置的方法

1 个答案: