Как я могу получить элемент, в котором находится карет, с помощью Javascript при использовании contentEditable?

Скажем, у меня есть код HTML следующим образом:

<body contentEditable="true">
   <h1>Some heading text here</h1>
   <p>Some text here</p>
</body>

Теперь курсор (мигающий курсор) мигает внутри элемента H1, скажем, в слове "заголовок". Как я могу получить имя элемента, в котором находится карет, с JavaScript? Здесь я хотел бы получить "h1".

Это нужно работать только в WebKit (он встроен в приложение). Он должен предпочтительно также работать для выбора.

Если это действительно тривиально, я прошу прощения. Мои знания JavaScript (и DOM) очень не хватает.

Ответы

Ответ 1

Во-первых, подумайте, почему вы это делаете. Если вы пытаетесь запретить пользователям редактировать некоторые элементы, просто установите contenteditable на false для этих элементов.

Однако вы можете делать то, что вы просите. Нижеприведенный код работает в Safari 4 и возвращает node выбор привязан (т.е. когда пользователь начал выбирать, выбор "назад" вернет конец, а не начало) - если вы хотите, чтобы тип элемента как string, просто получите свойство nodeName возвращаемого node. Это работает и для нулевой длины (т.е. Только позиция каретки).

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}