Как поймать первый дочерний элемент 'p' при событии 'набор текста в родительском contenteditable-элементе'?

Question

[Ст. Ку.]

Здравствуйте. Помогите, чтоб событие отрабатывалось только при печати в первом 'p'. Спасибо.

jsfiddle.net/kukaew/96ost4z5

<div contenteditable="true" class="txt">
  <p>Должен добавляться "!"</p>
  <p>А здесь не должен.</p>
</div>
<div id="pole"></div>

$('.txt').focus();
$('.txt').on('input', function() {
	$('#pole').append('!');
});

Делегирование не работает. Пытаюсь как-то так поймать номер первого 'p' - не получается.

var selObj = window.getSelection(), 
		rng  = selObj.getRangeAt(0),
		root = rng.startContainer;

Comments

[Kovalsky]

Выглядит немного дико. А какая задача?

В целом для решения можно сравнивать состояния - если текущий текст в .txt отличается от предыдущей версии и это отличие - в первой строке, то не добавлять '!'. Но мне кажется что если вы опишите задачу станет проще.

[Ст. Ку.]

Никита Полевой: задача описана ведь: нужно поймать первый "p". Нет, сравнивать тысячи знаков после каждого нового - не лучшее решение.

[Kovalsky]

Ст. Ку.: имеется в виду общая задача, для чего всё это делается. Возможно, contentEditable не является лучшим выбором в вашей ситуации, т.к. никаких специальных ивентов, никакой передачи таргета в вашей ситуации не будет, и вам в любом случае придётся пользоваться какими-нибудь хаками.

[Ст. Ку.]

Никита Полевой: Это текстовый редактор. ContentEditable - обязателен.

Answer 1

[Алексей Джо]

необходимо, чтобы у тега p был атрибут contenteditable="false"
https://jsfiddle.net/96ost4z5/1/

Comments

[Ст. Ку.]

Спасибо. Сейчас попробую.

[Ст. Ку.]

Нет, он просто генерит внутри 'p' 'span' с contenteditable="true" и начинается ад в DOM.

[Kovalsky]

Ст. Ку.: там никто ничего не генерирует, это вам в примере показали что можно сделать чтобы различать таргеты ввода. И кстати работает.

Бтв, если у .txt убрать атрибут contenteditable получится еще лучше.

[Ст. Ку.]

Никита Полевой: если у .txt убрать атрибут contenteditable - как тогда печатать-то?

[Ст. Ку.]

[Ст. Ку.]

cyb0rg_01:

var rng = window.getSelection().getRangeAt(0)
if (rng.startContainer.previousElementSibling!== null) return;

мне достаточно чтоб первый символ уловить. если все - сложнее, но в эту сторону

[Kovalsky]

Ст. Ку.: а зачем скрины? Вы просто говорите "он генерит", так вот он не генерит, это вам cyborg_01 от руки написал.

"если у .txt убрать атрибут contenteditable" - а вы просто попробуйте взять пример из этого ответа и сделать это. Вроде красиво получается.

Ни в коем случае вас не отговариваю и не пытаюсь убедить ни в чем, но я пока что не видел ни одного текстового редактора реализованного с помощью contenteditable.

[Ст. Ку.]

cyb0rg_01: :) я написал не вопрос, а решение. Проверяет есть элемент до или нету.