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

StackOverflow https://stackoverflow.com/questions/1197401

Вопрос

Допустим, у меня есть такой HTML-код:

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

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

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

Это было полезно?

Решение

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

Однако можно сделать то, что вы просите.Приведенный ниже код работает в Safari 4 и возвращает узел, к которому привязан выбор (т. е.где пользователь начал выбирать, выбор «назад» вернет конец вместо начала) – если вы хотите, чтобы тип элемента был строкой, просто получите nodeName свойство возвращаемого узла.Это также работает для выделений нулевой длины (т.просто позиция каретки).

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top