Reputation: 5
I have such a structure:
<div contenteditable="true">
<em class="class1">__<em>
<em class="class2">:<em>
<em class="class1">__<em>
<em class="class2">:<em>
<em class="class1">__<em>
</div>
How i can get DOM or JQuery object of focused <em>
?
document.activeElement
return general <div>
window.getSelection().focusNode
return text of focused <em>
Upvotes: 0
Views: 73
Reputation: 11935
Find a query to match all the elements for what you are interesed to know if them are focussed or not, for example
$("[contenteditable=true] em")
Then, suscribe to focus event
var lastFocused;
$("[contenteditable=true] em").focus(function(e) {
lastFocused = e.target;
});
You will have the focused element on lastFocused var, make sure to restrict what type of element you want on selector if possible
Upvotes: 1
Reputation: 3134
The em
tag should really only be used to style the text of an element, and that can be done using CSS with better effectiveness. That being said, you can hunt down the focused element using something like this:
window.getSelection().focusNode.parentElement;
That will return the actual em
element you are looking for. You can probably get a better hold on that using a jQuery selector:
$(window.getSelection().focusNode.parentElement);
Here is a Fiddle
Upvotes: 1