0

I have a number of divs each has the property contenteditable="true", I am able to detect when the user clicks or hovers over an element using JQuery, but how can I tell if the div is selected i.e. the text cursor appears within div and is ready to accept text input.

Ideally I am after a JQuery solution.

This isn't a duplicate of this as question marked does not take into consideration that a div is selected but not being edited!

Abs
  • 165
  • 1
  • 14
  • What research or attempt(s) have you done so far? – NewToJS Oct 19 '17 at 11:29
  • Possible duplicate of [jQuery Event : Detect changes to the html/text of a div](https://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div) – DaFois Oct 19 '17 at 11:31
  • @NewToJS Browsed throug CSS selecters and JQuery methods. Googled around a bit and attempted to see whether I can detect whether the text cursor is being displayed within the div or not. – Abs Oct 19 '17 at 11:32
  • @DanieleFois but I also want to detect whether the div is simply selected, the user may not have entered something yet. – Abs Oct 19 '17 at 11:34

1 Answers1

4

Like any other attribute you can hook into the focus() event. See the jquery focus() documentation for more information

<div id="editBox" contenteditable="true" style="border 1px solid">
&nbsp;
</div>

Javascript:

$('#editBox').focus(function() { alert('focused');  });
NibblyPig
  • 51,118
  • 72
  • 200
  • 356