Как сфокусировать конец текста в теге <code>в HTML с помощью Javascript? - PullRequest
Новая
       43

Как сфокусировать конец текста в теге <code>в HTML с помощью Javascript?

0 голосов
/ 08 июля 2019

Я пытаюсь переформатировать некоторый текст внутри тега HTML-кода с помощью события onkeypress. Но после изменения текста курсор переходит в начальную позицию. Я должен сохранить текущую позицию курсора.

Чтобы предотвратить эту проблему, я нашел это; 

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

из: Использование JavaScript для размещения курсора в конце текста в элементе ввода текста

Но я вижу, это работает только для элементов ввода: (

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

как я могу играть с позицией курсора внутри тега кода?

1 Ответ

1 голос
/ 08 июля 2019

Вы можете использовать Диапазон и Выбор , чтобы установить выбор 

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>
...