Display input element's element and bounding rectangle on mouse move

by knevercode

HTML

<p>Hover over the input and look at the console output, then move caret three lines below and check again</p>

<textarea id="input" rows="4" cols="50">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</textarea>

CSS

textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  font-size: 18px;
}

JavaScript

window.input.addEventListener("pointermove", onPointerMove)

function onPointerMove(event) {
  console.log(`Main event - x: ${event.offsetX}, y: ${event.offsetY}`);
  for (let e of event.getCoalescedEvents()) {
    console.log(`Coalesced event - x: ${e.offsetX}, y: ${e.offsetY}`);
  }
}