Почему библиотека Rangy не работает с contenteditable в Opera?

Question

Я использую популярную библиотеку Rangy внутри contenteditable DIV. Мой код довольно прост:

var saved_selection = false;

$('#contenteditable').bind('keypress mouseup', function(e){
  $(this).find('.rangySelectionBoundary').remove();
  saved_selection = rangy.saveSelection();
});​

Теперь это работает довольно хорошо в Chrome и FF. Однако в Opera он ведет себя очень странно, потому что не позволяет вставлять какие-либо символы в contenteditable и скорее теряет фокус, или, по крайней мере, так кажется.

Я подготовил jsFiddle для тестирования. В Opera невозможно вводить символы в редактируемом DIV: http://jsfiddle.net/twST6/1/

Кто-нибудь может объяснить и решить мою проблему, как заставить этот код работать в Opera?

Заранее благодарю за любую помощь.

Answer 1

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

/questions/10129971/zamenite-innerhtml-v-contenteditable-div/10129977#10129977

Я также близок к тому, чтобы выпустить более надежную выборку на основе индекса символов для сохранения / восстановления для Rangy. Смотрите демо здесь:

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

Кстати, в Rangy есть встроенный метод удаления маркеров выделения:

rangy.removeMarkers(saved_selection);