Re: [EXTERNAL] 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:%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:20250722" rel="nofollow">Tue, 22 Jul 2025 13:11:01 -0700</a></span> </p> </div> <div itemprop="articleBody" class="msgBody"> <!--X-Body-of-Message--> <pre>Based on feedback, we are now exploring a new direction, as getSelectionBoundingClientRect() didn't resolve other Range-based operations for <textarea> and <input> elements. Some of the use cases for this new feature are placing a popup near the caret when the user presses a certain key and marking syntax errors using the Custom Highlight API<<a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API</a>>.</pre><pre> Our new proposal is being tracked under FormControlRange Interface<<a rel="nofollow" href="https://github.com/whatwg/html/issues/11478">https://github.com/whatwg/html/issues/11478</a>>. We also created a new I2P<<a rel="nofollow" href="https://groups.google.com/a/chromium.org/g/blink-dev/c/Xg_dfObLp8c/m/qhR3wD4MDAAJ">https://groups.google.com/a/chromium.org/g/blink-dev/c/Xg_dfObLp8c/m/qhR3wD4MDAAJ</a>> for this proposal, and the corresponding explainer can be found here<<a rel="nofollow" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/FormControlRange/explainer.md">https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/FormControlRange/explainer.md</a>>. Thanks, Andrés. ________________________________ From: Stephen Chenney <schen...@chromium.org> Sent: Wednesday, June 18, 2025 10:05 AM To: Andres Regalado Rosas <t-andre...@microsoft.com> Cc: blink-dev@chromium.org <blink-dev@chromium.org>; Leo Lee <leo....@microsoft.com>; Mike Jackson (EDGE) <mjack...@microsoft.com>; Daniel Clark <dan...@microsoft.com>; Ana Sollano Kim <ana.soll...@microsoft.com> Subject: [EXTERNAL] Re: [blink-dev] Intent to Prototype: getSelectionBoundingClientRect() for <textarea> and <input> elements You don't often get email from schen...@chromium.org. Learn why this is important<<a rel="nofollow" href="https://aka.ms/LearnAboutSenderIdentification">https://aka.ms/LearnAboutSenderIdentification</a>> On Tue, Jun 17, 2025 at 1:47 PM 'Andres Regalado Rosas' via blink-dev <blink-dev@chromium.org<<a rel="nofollow" href="mailto:blink-dev@chromium.org">mailto:blink-dev@chromium.org</a>>> wrote: 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>> 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<<a rel="nofollow" href="mailto:blink-dev+unsubscr...@chromium.org">mailto:blink-dev+unsubscr...@chromium.org</a>>. 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/LV9PR21MB5189A65B3B0B2163AE8D8E2E805CA%40LV9PR21MB5189.namprd21.prod.outlook.com">https://groups.google.com/a/chromium.org/d/msgid/blink-dev/LV9PR21MB5189A65B3B0B2163AE8D8E2E805CA%40LV9PR21MB5189.namprd21.prod.outlook.com</a>. </pre> </div> <div class="msgButtons margintopdouble"> <ul class="overflow"> <li class="msgButtonItems"><a class="button buttonleft " accesskey="p" href="msg13950.html">Previous message</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="c" href="thrd2.html#14255">View by thread</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="i" href="maillist.html#14255">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"><span class="subject"><a href="msg13950.html">Re: [blink-dev] Intent to Proto...</a></span> <span class="sender italic">Stephen Chenney</span></li> <li><ul> <li class="icons-email tSliceCur"><span class="subject">Re: [EXTERNAL] Re: [blink-d...</span> <span class="sender italic">'Andres Regalado Rosas' via blink-dev</span></li> </ul> </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: [EXTERNAL] Re: [blink-dev] Intent to Prototype: getSelectionBoundingClientRect() for <textarea> and <input> elements"> <input type="hidden" name="msgid" value="LV9PR21MB5189A65B3B0B2163AE8D8E2E805CA@LV9PR21MB5189.namprd21.prod.outlook.com"> <input type="hidden" name="relpath" value="blink-dev@chromium.org/msg14255.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:%22Re%5C%3A+%5C%5BEXTERNAL%5C%5D+Re%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="msg13950.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">LV9PR21MB5189A65B3B0B2163AE8D8E2E805CA@LV9PR21MB5189.namprd21.prod.outlook.com</li> </ul> </div> </body> </html>