Способ получить элемент пользователь в настоящее время набирает в iframe designMode?

Question

У меня есть iframe с designMode, установленным на 'on'.В нем есть несколько элементов div, и поскольку iframe является редактируемым, пользователь может вводить и редактировать любой из этих элементов div.Мне нужно отключить возможность для пользователя редактировать один из элементов div.

Я могу запретить пользователю нажимать на элемент div следующим образом:

document.getElementById('mydiv').addEventListener('mousedown', function(event) {
  event.preventDefault();
  return false;
}, true);

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

document.getElementById('mydiv').addEventListener('focus', function(event) {
  ...
}, true);

, но этот обратный вызов никогда не вызывается.Затем я попытался предотвратить нажатия клавиш:

document.getElementById('mydiv').addEventListener('keydown', function(event) {
  event.preventDefault();
  return false;
}, true);

, но опять же, обратный вызов никогда не вызывается.Я даже попытался прикрепить обратный вызов к документу:

document.addEventListener('keydown', function(event) {
  ...
}, true);

, и тогда обратный вызов действительно вызывается, но мне нужен способ отменить событие, только если целевой элемент - это рассматриваемый div.

Любые идеи о том, как достичь цели, приветствуются.

Answer 1

Если вы можете позволить себе игнорировать несколько старых браузеров, таких как Firefox 2, самый простой способ сделать это - не использовать designMode, а вместо этого использовать contentEditable на каждом из редактируемых <div> с недоступно для редактирования <div> с.

<div contenteditable="true">Some editable stuff</div>

<div>Some non-editable stuff</div>

<div contenteditable="true">Some more editable stuff</div>

В противном случае, как вы обнаружили, вы ведете проигрышную битву со встроенным поведением браузера.

Answer 2

Вы можете просто применить «редактируемый» класс к любым редактируемым элементам и удалить его, когда это не так.

YUI предоставляет хороший простой тест для этого: YAHOO.util.Dom.hasClass (yourEl, 'editable');

Затем в вашем обработчике, если у цели нет класса 'editable', отмените / вернитесь / предотвратите дефолт / stopEvent.

-d

ДОПОЛНЕНИЕ http://developer.yahoo.com/yui/examples/event/event-delegation.html