Search code examples
javascriptjqueryhtmlcontenteditable

Using focus on elements inside contenteditable div?

I am trying to use the following code to reference anything focused inside my contenteditable div, which has an id of rt:

var lastfocused;
$("#rt *").focus(function () {
  lastfocused = $(this);
});

For some reason, lastfocused always equals $("#rt");, but never anything else which may be inside the contenteditable div. How do I make it so that anything focused inside the contenteditable div will be stored in the lastfocused variable?

Solution

  • Looks like your problem is elsewhere. The above code perfectly works for me:

    http://jsfiddle.net/8hZWq/

    EDIT

    If the children elements aren't inputs as you said, but divs - the focus() method is not applicable to them, as it works only for input, textareas, select etc.

    You can also use .click() instead of focus() to store the reference to the last clicked element. Bear in mind though, it also depends to the structure of your elements.

    For example if you have multiple levels of containers within children divs, the #ID * selector will actually trigger multiple times each level of children starting from the #ID.

    If you like to store reference to only the first level of children of the #ID, you should use #ID > * selector to refer only direct children.

    If you like to store the reference to only the very element that was clicked upon regardless of it's level in relation to the container, you should use click event target reference instead:

    var clicked;
$('#ID').click(function(event){
   clicked = $(event.target);
});