Tag-like autocompletion and caret/cursor movement in contenteditable elements
caret, contenteditable, javascript
Solution
You could use my Rangy library, which attempts with some success to normalize browser range and selection implementations. If you've managed to insert the `<a>` as you say and you've got it in a variable called `aElement`, you can do the following:
var range = rangy.createRange();
range.setStartAfter(aElement);
range.collapse(true);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);
Problem
I'm working on a jQuery plugin that will allow you to do `@username` style tags, like Facebook does in their status update input box. My problem is, that even after hours of researching and experimenting, it seems REALLY hard to simply move the caret. I've managed to inject the `<a>` tag with someone's name, but placing the caret after it seems like rocket science, specially if it's supposed work in all browsers. And I haven't even looked into replacing the typed `@username` text with the tag yet, rather than just injecting it as I'm doing right now... lol There's a ton of questions about working with contenteditable here on Stack Overflow, and I think I've read all of them, but they don't really cover properly what I need. So any more information anyone can provide would be great :)