Как JS изменить поведение Enter на Shift+Enter?

Question

[Пашенька]

Т.е. вместо парагрфов вставлять переносы строк

$(".class").keydown(function(e){
 if (e.keyCode == 13)     {
         //???
 }
});

Либо другой вариант, который будет уметь в contenteditable по энтору вставлять <br> вместо параграфов. Перерыл много стаковерфлоу, но так и не нашёл путного кроссбраузерного решения

Answer 1

[Евгений Петров]

Пример

$(document).on('keydown', '[contenteditable]', function (e) {
	if (e.keyCode == 13) {
		var node = document.createElement('br');

		e.preventDefault();

		try {
			var selection = window.getSelection(),
				range = selection.getRangeAt(0);

			range.deleteContents();
			range.collapse(false);
			range.insertNode(node);
			range.selectNode(node);
			range.collapse(false);
			selection.removeAllRanges();
			selection.addRange(range);
		} catch (z) {
			var range = document.selection.createRange();

			range.pasteHTML(node.outerHTML);
			range.select();
		}
	}
});

Comments

[Пашенька]

Евгений Петров я так понимаю это просто отменит shift+enter, а мне нужно чтобы при нажатии на enter выполнилось поведение нажатия клавиш shift+enter, если конечно такое осуществимо

[Евгений Петров]

Для этого достаточно было немного получше поискать:)
Дал вам пуговицу, а теперь пришил к ней пару отличных штанов.

[Пашенька]

Евгений Петров искал я и как победить очень очень плохой contenteditable, но потом подумал, что наверное проще сделать такой трикс. Спрашиваю только, когда совсем терпение покидает :)
На первый взгляд ит вокрс вери вэлл, спасибо!

[Евгений Петров]

like-a-boss: Он не плохой:) Особенно, если забить на IE8 и ниже.
Я понимаю, что для поиска и фильтрации решений на этот вопрос нужен опыт в Javascript и работе с contenteditable. Более того, пары нюансов я не знал и мне было интересно восполнить пробел.
Не принимайте мои слова слишком серьёзно:) Всё будет хорошо:)

[Пашенька]

Евгений Петров ну пока что он плохой, т.к. я не могу(всё равно плохой он :)) его получать в едином форматировании(например как если бы это была textarea) после правки различными способами: ручной ввод, копи-паста с форматированием, повторная правка. Утром что-нить придумаю)

[Евгений Петров]

like-a-boss: Суть работы со вставкой в textarea сводится к тем же Selection и Range:)
Пример codepen.io/cleric/pen/hIqye

[Пашенька]

Евгений Петров Очень жаль, что к ним) Но у меня всё же не textarea

[Пашенька]

Евгений Петров А можно ли пофиксить положение каретки в случае, когда блок пуст и вводится новый текст: строка переносится, но каретка остаётся на прежней?
Вот вам и хороший contenteditable :)

[Евгений Петров]

Посмотрю позже — есть проблема с вводом в конце текста.

[Пашенька]

Евгений Петров да, кстати, именно в конце строки

[Евгений Петров]

Проблема связана с парсингом br на границах блочного контента.
Попробуйте заменить на span — всё будет нормально. Как только установить ему display:inline-block, картина будет такой, как вы описали.
Ровно та же история в конце вложенного параграфа.
Это гарантированно лечится, просто нужно подумать — ка лучше.

[Пашенька]

Евгений Петров наверное, я идиот, но у меня и со спаном тоже самое :\