Как переместить курсор за пределы вставленного элемента в контейнере contenteditable

Question

Как переместить курсор за пределы вставленного элемента в контейнере contenteditable

Рейтинг: 0Ответов: 1Опубликовано: 31.07.2023

Эмитирую строку формулы Excel на js.

Проблема - после вставки значения (в дальнейшем выбором клик мыши) в примере в коде (цифра 12 цветом) в div contenteditable дальнейший ввод с клавиатуры осуществляется в том же стиле. По плану, каждый вставленный (выбранный) элемент будет маркироваться своим цветом, но следующий после вставки символ не должен выделятся (маркироваться) тем же цветом.

нужно так

пишу с использование vue, код вставки и определения положения курсора.

      const clist = () => {
      if (target.value?.childNodes.length === 1) {
          let sel, range;
          if (window.getSelection) {
              sel = window.getSelection();
              if (sel.getRangeAt && sel.rangeCount) {
                  range = sel.getRangeAt(0);
                  range.deleteContents();
                  let newNode = document.createElement("span");
                  newNode.innerHTML = "12"
                  newNode.style = 'color: #e76910;'
                  range.insertNode(newNode);
                  document.getSelection().collapseToEnd(); //Схлопываем диапазон к концу строки (устанавливаем курсор в конец выделения)

              }
          }
      }
  }

Как же снять форматирование сразу после вставки?

Буду благодарен за конструктивный ответ.

javascript vue.js dom

Источник: Stack Overflow на русском

Answer 1

▲ 0

Вот так получилось как хотел, далее при расчете чищу все от этих тонких пробелов &#8201

   const clist = () => {
         if (target.value?.childNodes.length >= 1) {
              let sel, range;
              if (window.getSelection) {
                  sel = window.getSelection();
                  if (sel.getRangeAt && sel.rangeCount) {
                      range = sel.getRangeAt(0);
                      let newNode = document.createElement("span");
                      newNode.innerHTML = "12"
                      newNode.style = 'color: #e76910;'
                      range.insertNode(newNode);
                      let newNode1 = document.createElement("span");
                      newNode1.style = 'color: black;'
                      newNode1.innerHTML = "&#8201;"
                      newNode.after(newNode1)
                      range.selectNodeContents(newNode1)
                      document.getSelection().collapseToEnd(); //Схлопываем диапазон к концу строки (устанавливаем курсив в конец выделения)
                  }
              }

          }
          console.log(target.value?.childNodes)
      }

Как переместить курсор за пределы вставленного элемента в контейнере contenteditable

Ответы