Get cursor position (in characters) within a text Input field

Navigating browser compatibility and dynamic updates

The selectionStart property is handy, but for the grumpy uncle, Internet Explorer, you gotta play by its rules. Here's how you would do it for compatibility:

var input = document.getElementById('inputId');
var pos = input.selectionStart; // Usual suspects like Chrome, Firefox, etc.

if (document.selection) { // Fussy Uncle IE's favorite cologne
  var range = document.selection.createRange();
  range.moveStart('character', -input.value.length);
  pos = range.text.length; // Ha! Got the cursor!
}


To keep track of the cursor's position as it sneakily moves around, attach a listener to the keyup event:

document.getElementById('inputId').addEventListener('keyup', function(e) {
  var pos = e.target.selectionStart;
  console.log('Cursor at: ', pos, 'Caught you red-handed, Cursor!');
});


When browser compatibility becomes overwhelming, jQuery plugins or ready-made caret manipulation libraries can come to the rescue!

Enhancing jQuery for seamless usage

If jQuery is your loyal sidekick, you can tailor-make a method to fetch the cursor's position:

$.fn.caretPosition = function() {
  var input = this.get(0);
  if (!input) return; // Return from the function if no (input) element
  if ('selectionStart' in input) {
    // The usual browsers
    return input.selectionStart;
  } else if (document.selection) {
    // IE again, sigh.
    input.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -input.value.length);
    return range.text.length; // Boom! Cursor position!
  }
};
// Usage: $('#inputId').caretPosition(); //Cursor, you can run, but you can't hide!


This makes fetching the cursor position as simple as solving a 2-piece puzzle, simply call $(selector).caretPosition().

Showcasing advanced wieldings and pointers

Tackling dynamic input field changes

Tracking cursor position during text manipulation operations like insertions or deletions can be managed with an input event listener:

document.getElementById('inputId').addEventListener('input', function(e) {
  var pos = e.target.selectionStart;
  // Now play around with pos, do a dance, bake a pizza, the world is your oyster!
});


Working with contenteditable elements

In case you are building your own contenteditable realm:

function caretPositionInEditable(editableDiv) {
  var caretPos = 0, sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    /* This code is like a good detective movie, full of tension */
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset; // Here's your endgame!
      }
    }
  }
  return caretPos;
}


Robustness and variations

A good detective leaves no stone unturned. Ensure compatibility with different input fields (text, textarea, etc.) and with/without specific type attribute. It assures uniform user experience.

Beware, here be dragons:

• Elements losing focus will reset the cursor position.
• Browsers might have different views about special characters or line breaks in <textarea>.
• Some methods might get shy if the cursor is at the extreme ends of the input field.