Замена содержимого в элементе разделения контента

Question

Есть блок:

<div class="editor-content" id="editor-content" contentEditable="true" role="textbox" spellcheck="true"></div>

Как при нажатии клавиши ввода или переходе на новую строку, делать замену стандартного div на <p class="article">?

Answer 1

Вот так можно, но из-за особенностей задачи при нажатии на ENTER, внутри блока создаются div с br, чтобы избежать этого - лучше использовать input или textarea.

const editor = document.querySelector('#editor-content');

editor.addEventListener('keypress', e => {
  if (e.keyCode === 13 && !editor.textContent) {
    e.preventDefault()
  }

  if (e.keyCode === 13 && editor.textContent) {
    e.preventDefault()
    addElement(editor.textContent, editor);
    editor.innerHTML = '';
  };
});


function addElement(text, ref) {
  const p = document.createElement("p");
  const content = document.createTextNode(text);

  p.classList.add('article');
  p.appendChild(content);

  document.body.insertBefore(p, ref);
};

#editor-content {height: 1rem;width: 100%;border: 1px solid blue;outline: none;}.article {color: red;}

<div class="editor-content" id="editor-content" contentEditable="true" role="textbox" spellcheck="true"></div>

БЛОГ НА HUSL

Замена содержимого в элементе разделения контента

Ответы (1 шт):