Provide an API for getting visible caret position in textarea/input element

[siliu1]

What is the issue with the HTML Standard?

What problem are you trying to solve?

There is no existing API to get selection bounds when selection is inside textarea/input element.
This proposal is to introduce an API on textarea/input to return selection bounds.

What solutions exist today?

Unfortunately there isn't a greate way to handle this. As suggested in this w3c/csswg-drafts#10346 :

The solution today is to clone the textarea as a div, and copy its layout effecting computes styles (such as font, size, writing direction, borders)
over so that we can get a Range back from the div. With the Range we can get the boundingClientRect.

How would you solve it?

We can introduce a new getSelectionBoundingClientRect() API on textarea/input element:

partial interface HTMLTextAreaElement {
  [NewObject] DOMRect getSelectionBoundingClientRect();
}

partial interface HTMLInputElement {
  [NewObject] DOMRect getSelectionBoundingClientRect();
}

The API would return the bounding rect of current selection in textarea/input element. The bounding rect
is the caret rect if the selection is collapsed. If there is no selection in textarea/input, it would return empty rect.

The proposed API aligns with existing selection APIs on textarea/input element such as select(), selectionStart, selectionEnd, etc.

Additional information

This proposal is only scoped to textarea/input element. For other elements, the selection/range API can be used, which has a getBoundingClientRect method to get the bounding client rect.

[sanketj]

cc: @keithamus

[siliu1]

We discussed this issue during TPAC 2024. Minutes can be found here: whatwg/meta#326 (comment)

The group support for getSelectionBoundingClientRect(). We should also consider expansions to include custom start/end offset. Another suggestion is to add another API to expose a set of rects similar to Range.getClientRects().

Based on the discussion. I think we can resolve the issue with the following proposed resolution:

Add getSelectionBoundingCLientRect() API to textarea/input element. Open another issue to keep track of adding additional API to expose set of client rects for selection range in textarea/input element.

cc @keithamus @sanketj