$.on('keydown mousedown',...), force caret to the end of the node

$.on('keydown mousedown',...), force caret to the end of the node

Inside of a contenteditable, say that the caret is inside of a specific node (in my case, <q data-em="1"></q>&nbsp;). How can I immediately kick the caret outside of the node, past the ending tag?

I'm using the same loop that Jake helped me build in another thread to find when they're within the Q element:

  2. $('[data-ce]').on('click keydown', function(e) {
    3.       var node = getSelection().anchorNode.parentNode;

  4.       while (node && node.hasAttribute && !node.hasAttribute('contenteditable')) {
  5.             console.log(node.nodeName);
  6.             node = node.parentNode;
  7.       }
  8. });

And the fiddle:


In my case, the <q> element is a CSS sprite for the emojis, but there are times when Firefox and my Android browser will focus inside of the <q></q> tag instead of outside of it, which leads to something like <q data-em="1"><q data-em="2"></q></q>.

I was using a regex to fix it, but then I lose the focus. So instead, I'm hoping to find a way to ensure that the caret is always forced to be outside of the node as soon as it's inserted.