0

Есть блок:

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

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

2
  • уточните вопрос - "замену стандартного div на" - это что?
    – Zhihar
    22 окт 2020 в 21:26
  • прошу прощение, не поставил код, на любой тег с классом
    – fedor
    22 окт 2020 в 21:34

1 ответ 1

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>

2
  • 1
    Чтобы избежать появления <div> с <br> вставьте в обработчик после условия e.preventDefault();.
    – UModeL
    23 окт 2020 в 6:14
  • @UModeL спасибо, добавил
    – ccxdec
    23 окт 2020 в 11:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.