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</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}`);
  }
}