nanu146 Ответов: 0

Установка курсора (курсора) внутри полужирного элемента, присутствующего внутри contenteditable абзаца

Я пытался создать веб-текстовый редактор. И в рамках этого процесса я пытаюсь динамически создавать и изменять элементы на основе событий нажатия клавиш для редактирования шрифтов. В этом конкретном случае jsfiddle пример я пытаюсь создать сильный элемент после нажатия CRTL+b и установки фокуса/каретки внутри сильного элемента так, чтобы последующий введенный текст был частью полужирного элемента и, следовательно, имел полужирный текст. Но мой код просто создает сильный элемент, но не переносит фокус, поэтому никакой текст не становится смелее.

Что я уже пробовал:

В приведенном ниже коде я создаю прослушиватель событий для захвата событий нажатия клавиш

p=document.getElementsByTagName("p")[0];

//console.log(p)

// adding eventlistener for keydown
p.addEventListener("keydown",listener);

// eventlistenerr callback function
function listener(){
  e=window.event;
  if(e.ctrlKey && e.keyCode==66)
    {
      console.log("CTRL+B");

      // creating bold element
      belm=document.createElement("strong");
      belm.setAttribute("contenteditable","true")
      p.appendChild(belm);

      //bug below
      // setting focus inside bold element
      setfocus(belm,0);
      e.preventDefault();
    }
}


Вот функция для установки фокуса.

function setfocus(context, position){
    var range = document.createRange();
    position =position || 0;
    var sel = window.getSelection();
    range.setStart(context, position);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    context.focus();
}


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

Щелчок здесь для живого примера.

0 Ответов