[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:%22%27Andres+Regalado+Rosas%27+via+blink%5C-dev%22" rel="nofollow"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">'Andres Regalado Rosas' via blink-dev</span></span></a></span> <span class="date"><a href="/search?l=blink-dev@chromium.org&q=date:20250617" rel="nofollow">Tue, 17 Jun 2025 10:47:01 -0700</a></span> </p> </div> <div itemprop="articleBody" class="msgBody"> <!--X-Body-of-Message--> <pre>Contact emails t-andre...@microsoft.com<<a rel="nofollow" href="mailto:t-andre...@microsoft.com">mailto:t-andre...@microsoft.com</a>>, ansol...@microsoft.com<<a rel="nofollow" href="mailto:ansol...@microsoft.com">mailto:ansol...@microsoft.com</a>>, leo...@microsoft.com<<a rel="nofollow" href="mailto:leo...@microsoft.com">mailto:leo...@microsoft.com</a>>, mjack...@microsoft.com<<a rel="nofollow" href="mailto:mjack...@microsoft.com">mailto:mjack...@microsoft.com</a>></pre><pre> 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. Initial public proposal <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>. </pre> </div> <div class="msgButtons margintopdouble"> <ul class="overflow"> <li class="msgButtonItems"><a class="button buttonleft " accesskey="p" href="msg13934.html">Previous message</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="c" href="index.html#13935">View by thread</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="i" href="maillist.html#13935">View by date</a></li> <li class="msgButtonItems textalignright"><a class="button buttonright " accesskey="n" href="msg13950.html">Next message</a></li> </ul> </div> <a name="tslice"></a> <div class="tSliceList margintopdouble"> <ul class="icons monospace"> <li class="icons-email tSliceCur"><span class="subject">[blink-dev] Intent to Prototype: get...</span> <span class="sender italic">'Andres Regalado Rosas' via blink-dev</span></li> <li><ul> <li class="icons-email"><span class="subject"><a href="msg13950.html">Re: [blink-dev] Intent to Proto...</a></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="[blink-dev] Intent to Prototype: getSelectionBoundingClientRect() for <textarea> and <input> elements"> <input type="hidden" name="msgid" value="MW2PR2101MB09222727A956427F09B985AC8070A@MW2PR2101MB0922.namprd21.prod.outlook.com"> <input type="hidden" name="relpath" value="blink-dev@chromium.org/msg13935.html"> <input type="submit" value=" 'Andres Regalado Rosas' via blink-dev "> </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:%22%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="msg13934.html" title="p">Previous message</a></li> <li class="icons-next"><a href="msg13950.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">MW2PR2101MB09222727A956427F09B985AC8070A@MW2PR2101MB0922.namprd21.prod.outlook.com</li> </ul> </div> </body> </html>