根据条件改变光标(插入符号)位置的方法

问题描述 投票:0回答:1

关于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区域”后面单击时不会显示插入符号。

如何在“Hello区域”中显示插入符号?

提前感谢您的帮助。

javascript jquery html html5
1个回答
0
投票

即使在你的代码中,我也可以删除图标:只需点击图标后按下退格键,就可以删除它。

但为了你的目的,我可以建议这个:https://jsfiddle.net/bardc04j/

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

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

此外,我只是删除了您的CSS,将图标放在文本旁边。

希望能有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.