Listen to, inspect, and move the browser caret.

View the demo for an example of the information and operations available.

This should work with IE8+ and all modern browsers.

$ component install adamsanderson/caret

Caret(element): Create a new text caret observer. If an element is defined, then only changes on that element will be reported.

caret.on('change', fn): Listen for changes to the user's text caret.

caret.parentElement(): Returns the parent element containing the text caret.

caret.textBefore(): Returns the text before the caret within the current element.

caret.textAfter(): Returns the text after the caret within the current element.

caret.moveToStart(): Moves the caret to the beginning of the element that the Caret was initialized with.

caret.moveToEnd(): Moves the caret to the end of the element that the Caret was initialized with.

caret.moveBefore(element): Moves the caret just before the element.

caret.moveAfter(element): Moves the caret just after the element.

Watch for when the user starts editing a twitter handle (ie: @someone).

var el = document.getElementById('content');
var caret = new Caret(el);

caret.on('change', function(){
  var text = this.textBefore();
  var match = text.match(/@(\w+)$/);
  
  if (match) {
    console.log("Editing user name:", match[1]);
  }
});

MIT

---

Adam Sanderson, http://monkeyandcrow.com

With much help from: Oleg Slobodskoi and Julian Gruber