Подтвердить что ты не робот

Обнаружение события keyup для contenteditable child, чей родитель является contenteditable div

Цель: Присоединить обработчик события keydown к содержательному контенту, который является дочерним элементом contenteditable div.

Проблема: Если вы вводите span, родительское событие запускается не дочерними. Я хочу, чтобы ребенок запускался, чтобы я мог захватить текст. Я только хочу, чтобы этот контент был доступен для детей, так как их будет много.

HTML/JS находится ниже, а ссылка скрипта находится здесь: http://jsfiddle.net/aBYpt/4/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span class="child" contenteditable="true">First child span text.</span>
    <span class="child" contenteditable="true">Second child span text.</span>
    <span class="child" contenteditable="true">Third child span text.</span>
</div>

<div id="console"></div>

JavaScript/JQuery

$(document).on( 'keyup', '.parent', function() {
    $('#console').html( 'Parent keyup event fired.' );
    //do stuff
});

$(document).on( 'keyup', '.child', function() {
    $('#console').html( 'Child keyup event fired.' );
    //do stuff
});

** Примечание. Обработка событий делегируется документу, поскольку элементы динамически добавляются.

4b9b3361

ОТВЕТЫ

Ответ 1

Итак, это ошибка. Обходное решение, подтвержденное для FF23 и CHROME29 (на linux без vm, поэтому не может тестировать IE). Вы должны установить интервалы обертывания как допустимые для контента значения false, вы не можете просто пропустить объявление атрибута contenteditable, что является смешным. Решение через Событие Keypress для вложенного контента, редактируемого (jQuery)

Вот скрипка: http://jsfiddle.net/aBYpt/14/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span contenteditable="false">
        <span class="child" contenteditable="true">First child span text.</span>
    <span contenteditable="false">
        <span class="child" contenteditable="true">Second child span text.</span>
    </span>
</div>

<div id="console"></div>

JavaScript/JQuery

$(document).on( 'keyup', '.parent', function() {
    //do stuff
    $('#console').html( 'Parent keyup event fired.' );
});

$(document).on( 'keyup', '.child', function(e) {
    //do stuff
    $('#console').html( 'Child keyup event fired.' );
    e.stopPropagation();
});