2

I'm trying to get absolute positioning of a caret when user is writing.

I know that document.caretRangeFromPoint(e.clientX, e.clientY), but e.clientX, e.clientY are undefined if event is a key pression. I made a jsfiddle where it is obvious that mouse click carries this information and event on key does not.

var test = function(e) {
   var output;
   var el = document.getElementById("test");
   var range = window.getSelection().getRangeAt(0);
   var positionToUse = document.caretRangeFromPoint(e.clientX, e.clientY);

   output = "Caret char pos: " + getCharacterOffsetWithin(range, el) + "<br>Position Pixels: " + e.clientX + " " + e.clientY
+ "<br>Position Pixels 2: " + e.target.offsetLeft + " " + e.target.offsetTop;

   document.getElementById("output").innerHTML = output;
   //positionToUse.insertNode(document.createElement('span'));
};

window.onclick = test;
window.onkeyup = test;

Complete code at http://jsfiddle.net/NicoD/cgfHV/

Do you know some event that carry caret position?

Thank you

Nico
  • 81
  • 6
  • You might want to take a look to [this answer](https://stackoverflow.com/questions/3972014/get-contenteditable-caret-index-position). – Kamafeather Nov 18 '20 at 01:09

0 Answers0