如何使用 Javascript 在 HTML 中的 <code> 标记中聚焦文本的结尾？

Question

我正在尝试通过 onkeypress 事件重新格式化 HTML 代码标记中的某些文本。但是在文本更改后，光标会转到起始位置。我必须保持光标的当前位置。

为了防止这个问题我发现了这个；

this.selectionStart = this.selectionEnd = this.value.length;

来自： Use JavaScript to place cursor at end of text in text input element

但我明白了，它只适用于输入元素:(

<code contenteditable="true" id="editor"  onkeypress="CreateStyle()">
  select * <span style="color:blue">from</span> SomeTable</code>

如何在代码标签内使用光标位置？

Answer 1

您可以使用Range 和Selection 来设置选择

const codeNode = document.getElementById('editor');
const range = document.createRange();
const selection = window.getSelection();

range.setStartAfter(codeNode.lastChild);
range.setEndAfter(codeNode.lastChild);

selection.removeAllRanges();
selection.addRange(range);

<code contenteditable="true" id="editor"  onkeypress="CreateStyle()">
  select * <span style="color:blue">from</span> SomeTable</code>