Как создать свой способ переноса строк в div contenteditable true?

Question

[looperman]

В обычном состоянии при нажатии на Enter в div c contenteditable = true, создаётся новый блок.
Мне нужно, чтобы при нажатии на Enter создавалась новая текстовая строка и не более. Как этого можно добиться? Спасибо!

Answer 1

[Надим]

Используй CSS-свойство white-space: pre-wrap

Плюс, при вводе выполняй сравнение текста с содержимым и если оно не равно, делай замену:

document.querySelector('div[contenteditable="true"]').addEventListener('input', function() {
	if (this.innerHTML != this.innerText) {
		this.innerHTML = this.innerText;
		var range = document.createRange();
		range.selectNodeContents(this);
		range.collapse(false);
		var sel = window.getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
	}
});

Comments

[looperman]

Благодарю за ответ. Но не пойму как это может решить проблему.
Вот код:

textArea.addEventListener("keydown", e => {
  if (e.keyCode == 13) {
    e.preventDefault();
//пытаюсь создать перенос с помощью br, но работает криво
    const br = document.createElement("br");
    e.target.append(br);

//устанавливаю позицию курсора в самый конец
    const range = document.createRange();
    range.selectNodeContents(textArea);
    range.collapse(false);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
});

В итоге , чтобы перейти на новую строку нужно нажать на Enter два раза.  Почему так?

[Надим]

looperman, вы творите дичь. Позже вам отвечу, сейчас не дома.

[Надим]

looperman, нажатие на Enter отменять не надо, просто делайте сравнение текста с содержимым и если оно не равно, выполняйте замены:

textArea.addEventListener('input', function() {
	if (this.innerHTML != this.innerText) {
		this.innerHTML = this.innerText;
	}
});

[Надим]

looperman, вот вариант с авто установкой курсора в конец:

document.querySelector('div[contenteditable="true"]').addEventListener('input', function() {
	if (this.innerHTML != this.innerText) {
		this.innerHTML = this.innerText;
		var range = document.createRange();
		range.selectNodeContents(this);
		range.collapse(false);
		var sel = window.getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
	}
});