Как я могу получить элемент, в котором находится курсор, с помощью Javascript при использовании contentEditable?
-
20-09-2019 - |
Вопрос
Допустим, у меня есть такой 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);
}