Событие нажатия клавиши на вложенном контенте, редактируемом (jQuery) - PullRequest
Новая
       21

Событие нажатия клавиши на вложенном контенте, редактируемом (jQuery)

5 голосов
/ 22 февраля 2011

У меня есть div CONTENTEDITABLE, и внутри этого div у меня есть span CONTENTEDITABLE, и я хочу обработать событие onkeypress на внутреннем SPAN.

Итак, код javascript будет:

$(function()
{
    $('#someid').keypress(function(event){alert('test');});
});

А содержимое HTML будет выглядеть следующим образом: 

<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>

Если вы протестируете его в браузере, вы увидите, что при нажатии кнопки «Тест» вы не увидите диалоговое окно «Тест».При нажатии на некоторый ТЕКСТ я знаю, что проблема в том, что событие инициируется в родительском div, поэтому SPAN не получает событие, в том числе и потому, что у него нет фокуса.Поэтому я хотел бы, чтобы вы помогли найти решение для этого.

Ответы [ 2 ]

6 голосов
/ 22 февраля 2011

Точный код, который вы разместили в своем вопросе, кажется, прекрасно работает на http://jsfiddle.net/gaby/TwgkC/3/

Проверено и работает с FF , Opera , Chrome , Safari , IE8 ..

единственное изменение - удаление комментария, который в его текущей форме создает синтаксическую ошибку .

У #someid должен быть фокус, чтобы сработало нажатие клавиши.
Если вы хотите, чтобы ваш код выделил элемент сразу после его создания, используйте метод .focus(). 

function AppendSpan()
{
    $('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){
          //do something here
          alert(this.id);
    }).focus();// bring focus to the element once you append it..
}

Обновление

Два способа справиться с этим ( тот факт, что есть вложенные contenteditable элементы ), не уверен, что любой из них приемлем для вашего случая, но вот они ..

  1. обернуть новый диапазон contenteditable в другой, для которого установлено значение contenteditable="false"
    ( демо: http://jsfiddle.net/gaby/TwgkC/10/)
  2. сделать #mydiv не равным contenteditable после добавления диапазона ..
    ( демо: http://jsfiddle.net/gaby/TwgkC/11/)
1 голос
/ 22 февраля 2011

Возможно, вам лучше привязать событие нажатия клавиши к элементу #mydiv следующим образом: 

$('#mydiv').delegate("span", "keypress", function(){
    console.alert('A key has been pressed: ' + this.id);
});

Однако при дальнейших исследованиях кажется, что элементы DOM, такие как регулярные промежутки и деления, не способны получить фокус. Однако вы можете обойти это, добавив атрибут tabindex к каждому диапазону.

...