Re: [blink-dev] Intent to Prototype: getSelectionBoundingClientRect() for and <input> elements</span></a></span> </h1> <p class="darkgray font13"> <span class="sender pipe"><a href="/search?l=blink-dev@chromium.org&q=from:%22Stephen+Chenney%22" rel="nofollow"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Stephen Chenney</span></span></a></span> <span class="date"><a href="/search?l=blink-dev@chromium.org&q=date:20250618" rel="nofollow">Wed, 18 Jun 2025 10:05:19 -0700</a></span> </p> </div> <div itemprop="articleBody" class="msgBody"> <!--X-Body-of-Message--> <pre>On Tue, Jun 17, 2025 at 1:47 PM 'Andres Regalado Rosas' via blink-dev < blink-dev@chromium.org> wrote:</pre><pre> > Contact emails > t-andre...@microsoft.com, ansol...@microsoft.com, leo...@microsoft.com, > mjack...@microsoft.com > > Explainer > > <a rel="nofollow" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/GetSelectionBoundingClientRect/explainer.md">https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/GetSelectionBoundingClientRect/explainer.md</a> > > Specification > None > > Summary > Implements retrieval of selection bounds within <textarea> and <input> > elements of type text, email, number, password, search, tel, or url. The > bounding rectangle is the caret rectangle if the selection is collapsed. If > there is no selection in the <textarea> or <input>, it will return an empty > rectangle. > > Blink component > Blink>Editing>Selection > <<a rel="nofollow" href="https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3EEditing%3ESelection%22">https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3EEditing%3ESelection%22</a>> > > Motivation > While getBoundingClientRect() can already be used to obtain selection > bounds in content-editable <div> elements, no equivalent exists for > standard form input elements. As a result, developers must resort to > workarounds involving <div> elements to simulate input behavior, which is > both inefficient and unnecessarily complex. This is due to the fact that, > unlike <textarea> and <input>, the <div> element isn’t designed for user > input—it lacks built-in accessibility, native form behavior, and requires > additional JavaScript to simulate basic input functionality. By contrast, > getSelectionBoundingClientRect() provides a simpler and more intuitive > solution for web developers. It allows them to work directly with standard > form elements without needing to reimplement input behavior or manage > accessibility concerns manually. This makes it a more robust and > developer-friendly alternative for handling selection bounds in web > applications. > > When you say "selection bounds" do you mean the bounds of selected content, or do you mean the bounds of the rectangle that the browser would draw for the selection highlight were the text to be selected? Could you give some use cases for the feature? When we proposed this for canvas text it was because the user must draw their own selection rect in that case, but in the DOM the selection rect is already drawn and styleable. > Initial public proposal > <a rel="nofollow" href="https://github.com/whatwg/html/is">https://github.com/whatwg/html/is</a> > <<a rel="nofollow" href="https://github.com/whatwg/html/issues/10614">https://github.com/whatwg/html/issues/10614</a>>dddsues/10614 > <<a rel="nofollow" href="https://github.com/whatwg/html/issues/10614">https://github.com/whatwg/html/issues/10614</a>> > > TAG review > None > > TAG review status > Pending > > Risks > > Interoperability and Compatibility > Low risk. WHATWG supports getSelectionBoundingClientRect() API: > <a rel="nofollow" href="https://github.com/whatwg/html/issues/10614#issuecomment-2383760604">https://github.com/whatwg/html/issues/10614#issuecomment-2383760604</a> > > *Gecko*: No signal ( > <a rel="nofollow" href="https://github.com/mozilla/standards-positions/issues/1249">https://github.com/mozilla/standards-positions/issues/1249</a>) No official > signal, but no objections shared in the discussion here > <a rel="nofollow" href="https://github.com/whatwg/meta/issues/326#issuecomment-2377500295">https://github.com/whatwg/meta/issues/326#issuecomment-2377500295</a> > > *WebKit*: No signal ( > <a rel="nofollow" href="https://github.com/WebKit/standards-positions/issues/512">https://github.com/WebKit/standards-positions/issues/512</a>) Positive based > on <a rel="nofollow" href="https://github.com/whatwg/meta/issues/326#issuecomment-2377500295">https://github.com/whatwg/meta/issues/326#issuecomment-2377500295</a> > > *Web developers*: Positive ( > <a rel="nofollow" href="https://github.com/web-platform-dx/developer-research/tree/main/mdn-short-surveys/2024-12-05-text-edit">https://github.com/web-platform-dx/developer-research/tree/main/mdn-short-surveys/2024-12-05-text-edit</a>) > Strong interest from web developers in a recent MDN short survey. > > *Other signals*: > > WebView application risks > *Does this intent deprecate or change behavior of existing APIs, such that > it has potentially high risk for Android WebView-based applications?* > None > > Debuggability > No specific DevTools changes required. > > Is this feature fully tested by web-platform-tests > <<a rel="nofollow" href="https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md">https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md</a>> > ? > Not currently tested, but tests will be added as part of feature > development. > > Flag name on about://flags > None > > Finch feature name > Pending > > Non-finch justification > A flag will be added as part of feature development. > > Requires code in //chrome? > False > > Tracking bug > <a rel="nofollow" href="https://issues.chromium.org/issues/421421332">https://issues.chromium.org/issues/421421332</a> > > Estimated milestones > No milestones specified > > Link to entry on the Chrome Platform Status > <a rel="nofollow" href="https://chromestatus.com/feature/6315564452282368?gate=5155359647596544">https://chromestatus.com/feature/6315564452282368?gate=5155359647596544</a> > > -- > You received this message because you are subscribed to the Google Groups > "blink-dev" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to blink-dev+unsubscr...@chromium.org. > To view this discussion visit > <a rel="nofollow" href="https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MW2PR2101MB09222727A956427F09B985AC8070A%40MW2PR2101MB0922.namprd21.prod.outlook.com">https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MW2PR2101MB09222727A956427F09B985AC8070A%40MW2PR2101MB0922.namprd21.prod.outlook.com</a> > <<a rel="nofollow" href="https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MW2PR2101MB09222727A956427F09B985AC8070A%40MW2PR2101MB0922.namprd21.prod.outlook.com?utm_medium=email&utm_source=footer">https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MW2PR2101MB09222727A956427F09B985AC8070A%40MW2PR2101MB0922.namprd21.prod.outlook.com?utm_medium=email&utm_source=footer</a>> > . > -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion visit <a rel="nofollow" href="https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGsbWzRYa%3DhDpbEsgKrPj9%3DPU%2BdKjA1_1STEPjDcri%3DuJKkzUA%40mail.gmail.com">https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGsbWzRYa%3DhDpbEsgKrPj9%3DPU%2BdKjA1_1STEPjDcri%3DuJKkzUA%40mail.gmail.com</a>. </pre> </div> <div class="msgButtons margintopdouble"> <ul class="overflow"> <li class="msgButtonItems"><a class="button buttonleft " accesskey="p" href="msg13935.html">Previous message</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="c" href="index.html#13950">View by thread</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="i" href="mail2.html#13950">View by date</a></li> <li class="msgButtonItems textalignright"><a class="button buttonright " accesskey="n" href="msg13943.html">Next message</a></li> </ul> </div> <a name="tslice"></a> <div class="tSliceList margintopdouble"> <ul class="icons monospace"> <li class="icons-email"><span class="subject"><a href="msg13935.html">[blink-dev] Intent to Prototype: get...</a></span> <span class="sender italic">'Andres Regalado Rosas' via blink-dev</span></li> <li><ul> <li class="icons-email tSliceCur"><span class="subject">Re: [blink-dev] Intent to Proto...</span> <span class="sender italic">Stephen Chenney</span></li> </ul> </ul> </div> <div class="overflow msgActions margintopdouble"> <div class="msgReply" > <h2> Reply via email to </h2> <form method="POST" action="/mailto.php"> <input type="hidden" name="subject" value="Re: [blink-dev] Intent to Prototype: getSelectionBoundingClientRect() for <textarea> and <input> elements"> <input type="hidden" name="msgid" value="CAGsbWzRYa=hDpbEsgKrPj9=PU+dKjA1_1STEPjDcri=uJKkzUA@mail.gmail.com"> <input type="hidden" name="relpath" value="blink-dev@chromium.org/msg13950.html"> <input type="submit" value=" Stephen Chenney "> </form> </div> </div> </div> <div class="aside" role="complementary"> <div class="logo"> <a href="/"><img src="/logo.png" width=247 height=88 alt="The Mail Archive"></a> </div> <form class="overflow" action="/search" method="get"> <input type="hidden" name="l" value="blink-dev@chromium.org"> <label class="hidden" for="q">Search the site</label> <input class="submittext" type="text" id="q" name="q" placeholder="Search blink-dev"> <input class="submitbutton" name="submit" type="image" src="/submit.png" alt="Submit"> </form> <div class="nav margintop" id="nav" role="navigation"> <ul class="icons font16"> <li class="icons-home"><a href="/">The Mail Archive home</a></li> <li class="icons-list"><a href="/blink-dev@chromium.org/">blink-dev - all messages</a></li> <li class="icons-about"><a href="/blink-dev@chromium.org/info.html">blink-dev - about the list</a></li> <li class="icons-expand"><a href="/search?l=blink-dev@chromium.org&q=subject:%22Re%5C%3A+%5C%5Bblink%5C-dev%5C%5D+Intent+to+Prototype%5C%3A+getSelectionBoundingClientRect%5C%28%5C%29+for+%3Ctextarea%3E+and+%3Cinput%3E+elements%22&o=newest&f=1" title="e" id="e">Expand</a></li> <li class="icons-prev"><a href="msg13935.html" title="p">Previous message</a></li> <li class="icons-next"><a href="msg13943.html" title="n">Next message</a></li> </ul> </div> <div class="listlogo margintopdouble"> </div> <div class="margintopdouble"> </div> </div> </div> <div class="footer" role="contentinfo"> <ul> <li><a href="/">The Mail Archive home</a></li> <li><a href="/faq.html#newlist">Add your mailing list</a></li> <li><a href="/faq.html">FAQ</a></li> <li><a href="/faq.html#support">Support</a></li> <li><a href="/faq.html#privacy">Privacy</a></li> <li class="darkgray">CAGsbWzRYa=hDpbEsgKrPj9=PU+dKjA1_1STEPjDcri=uJKkzUA@mail.gmail.com</li> </ul> </div> </body> </html>