Skip to content

Integrate OpaqueRange hooks into text controls (input/textarea) #11741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
stephanieyzhang wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

Integrate OpaqueRange hooks into text controls (input/textarea) #11741

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bd9b54e
very rough draft
stephanieyzhang Oct 2, 2025
accbe23
undo whitespace
stephanieyzhang Oct 2, 2025
4fbc254
additional hooks
stephanieyzhang Oct 6, 2025
96d51de
keep original formatting
stephanieyzhang Oct 16, 2025
3155a15
cleaning up textarea hooks
stephanieyzhang Oct 16, 2025
90163c4
remove unnecessary text control block
stephanieyzhang Oct 16, 2025
7ed3fb7
update mutation alg
stephanieyzhang Oct 23, 2025
202f881
rename to PlainTextRange + tpac changes pt 1
stephanieyzhang Dec 4, 2025
dfe8b08
rename to PlainTextRange + tpac changes pt 2
stephanieyzhang Dec 4, 2025
2eef616
updated to OpaqueRange + moved update range steps from dom spec
stephanieyzhang Jan 14, 2026
0cf1cbf
Merge branch 'whatwg:main' into stzhang-addfcr
stephanieyzhang Jan 14, 2026
5aa605f
Add getValueRange
stephanieyzhang Jan 14, 2026
6b6108c
specify supported input types
stephanieyzhang Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 131 additions & 6 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48558,6 +48558,7 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
undefined <span data-x="dom-textarea/input-setRangeText">setRangeText</span>(DOMString replacement);
undefined <span data-x="dom-textarea/input-setRangeText">setRangeText</span>(DOMString replacement, unsigned long start, unsigned long end, optional <span>SelectionMode</span> selectionMode = "preserve");
undefined <span data-x="dom-textarea/input-setSelectionRange">setSelectionRange</span>(unsigned long start, unsigned long end, optional DOMString direction);
[<span>CEReactions</span>, NewObject] <code>OpaqueRange</code> <span data-x="dom-textarea/input-getValueRange">getValueRange</span>(unsigned long start, unsigned long end);

undefined <span data-x="dom-input-showPicker">showPicker</span>();

Expand Down Expand Up @@ -48740,7 +48741,8 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
<code data-x="dom-textarea/input-selectionEnd">selectionEnd</code>, and
<code data-x="dom-textarea/input-selectionDirection">selectionDirection</code>, IDL attributes, the
<code data-x="dom-textarea/input-setRangeText">setRangeText()</code> and
<code data-x="dom-textarea/input-setSelectionRange">setSelectionRange()</code> methods, the
<code data-x="dom-textarea/input-setSelectionRange">setSelectionRange()</code>, and
<code data-x="dom-textarea/input-getValueRange">getValueRange()</code> methods, the
<code data-x="dom-input-stepUp">stepUp()</code> and
<code data-x="dom-input-stepDown">stepDown()</code> methods, and the
<code data-x="event-input">input</code> and
Expand Down Expand Up @@ -49764,6 +49766,30 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
<td class="no"> &middot; <!-- Date -->
<!-- <td class="no"> &middot; Month -->
<!-- <td class="no"> &middot; Week -->
<!-- <td class="no"> &middot; Time -->
<td class="no"> &middot; <!-- Local Date and Time -->
<td class="no"> &middot; <!-- Number -->
<td class="no"> &middot; <!-- Range -->
<td class="no"> &middot; <!-- Color -->
<td class="no"> &middot; <!-- Checkbox -->
<!-- <td class="no"> &middot; Radio Button -->
<td class="no"> &middot; <!-- File Upload -->
<td class="no"> &middot; <!-- Submit Button -->
<td class="no"> &middot; <!-- Image Button -->
<td class="no"> &middot; <!-- Reset Button -->
<!-- <td class="no"> &middot; Button -->

<tr>
<th> <code data-x="dom-textarea/input-getValueRange">getValueRange()</code>
<td class="no"> &middot; <!-- Hidden -->
<td class="yes"> Yes <!-- Text -->
<td class="yes"> Yes <!-- Search -->
Copy link
Member

@annevk annevk Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems wrong. Text and Search are the same column.

<td class="yes"> Yes <!-- Telephone, URL -->
<td class="no"> &middot; <!-- Email -->
<td class="yes"> Yes <!-- Password -->
<td class="no"> &middot; <!-- Date -->
<!-- <td class="no"> &middot; Month -->
<!-- <td class="no"> &middot; Week -->
<!-- <td class="no"> &middot; Time -->
<td class="no"> &middot; <!-- Local Date and Time -->
<td class="no"> &middot; <!-- Number -->
Expand Down Expand Up @@ -49919,6 +49945,47 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
to the value of the <code data-x="attr-input-value">value</code> content attribute, if there is
one, or the empty string otherwise, and then run the current <span>value sanitization
algorithm</span>, if one is defined.</span></p>

<p>If the element <a>supports opaque ranges</a> and this operation changes its <span data-x="concept-fe-value">value</span>,
then the user agent must run the <span>opaque range full replacement steps</span> with the element, the old value's
<span>length</span>, and the new value's <span>length</span>.</p>
<div algorithm>
<p>The <dfn>opaque range full replacement steps</dfn>, given an element <var>element</var>, an integer <var>oldLength</var>,
and an integer <var>newLength</var>, are to run the <span>opaque range replacement steps</span> with <var>element</var>,
0, <var>oldLength</var>, and <var>newLength</var>.</p>
</div>

<div algorithm>
<p>The <dfn>opaque range replacement steps</dfn>, given an element <var>element</var>, integers <var>replaceStart</var> and
<var>replaceEnd</var>, and an integer <var>replacementLength</var>, are:</p>

<ol>
<li><p>Let <var>delta</var> be <var>replacementLength</var> minus (<var>replaceEnd</var> − <var>replaceStart</var>).</p></li>

<li>
<p>For each <code data-x="dom-Range-OpaqueRange">OpaqueRange</code> object <var>range</var> associated with <var>element</var>,
Copy link
Member

@annevk annevk Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If elements have to hold onto a range object we should make that explicit.

run these substeps:</p>

<ol>
<li>
<p>For each boundary offset of <var>range</var> (its <code data-x="dom-AbstractRange-startOffset">startOffset</code> and its
<code data-x="dom-AbstractRange-endOffset">endOffset</code>), run these substeps:</p>
Copy link
Member

@annevk annevk Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this also needs some rewording. Perhaps you can define a set of steps and then run them for both. But we also don't want to reference public API in the user agent processing model.


<ol>
<li><p>If the boundary offset is less than or equal to <var>replaceStart</var>, then continue.</p></li>
Copy link
Member

@annevk annevk Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

continue needs to be referenced.


<li><p>Otherwise, if the boundary offset is less than or equal to <var>replaceEnd</var>, then set the boundary offset
to <var>replaceStart</var>.</p></li>

<li><p>Otherwise, increase the boundary offset by <var>delta</var>.</p></li>
</ol>
</li>
</ol>
</li>
</ol>

<p class=note>These updates operate on UTF-16 code unit indices.</p>
</div>
</div>

<div w-nodev>
Expand Down Expand Up @@ -49967,6 +50034,11 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
current state defines one.</p>
</div>

<p>If the element <a>supports opaque ranges</a> and its <span data-x="concept-fe-value">value</span>
has changed as a result of this algorithm, then the user agent must run the
<span>opaque range full replacement steps</span> with the element, the old value's
<span>length</span>, and the new value's <span>length</span>.</p>

<p>Each <code>input</code> element can be <i data-x="concept-fe-mutable">mutable</i>. Except where
otherwise specified, an <code>input</code> element is always <i
data-x="concept-fe-mutable">mutable</i>. Similarly, except where otherwise specified, the user
Expand Down Expand Up @@ -50175,6 +50247,10 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
element's <span data-x="concept-textarea/input-cursor">text entry cursor position</span> to the
beginning of the text control, and <span data-x="set the selection direction">set its selection
direction</span> to "<code data-x="">none</code>".</p></li>

<li><p>If <var>previouslySelectable</var> is true and <var>nowSelectable</var> is false, then for
each <code data-x="dom-OpaqueRange">OpaqueRange</code> object associated with this element, detach that object by setting both its
<code data-x="dom-AbstractRange-startOffset">startOffset</code> and <code data-x="dom-AbstractRange-endOffset">endOffset</code> to 0.</p></li>
</ol>
</div>

Expand Down Expand Up @@ -54900,6 +54976,12 @@ You cannot submit this form when the field is incorrect.</samp></pre>
<li><p>Invoke the <span>value sanitization algorithm</span>, if the element's <code
data-x="attr-input-type">type</code> attribute's current state defines one.</p></li>

<li><p>If the element's <span data-x="concept-fe-value">value</span> is different from
<var>oldValue</var>, and the element <a>supports opaque ranges</a>, then run the
<span>opaque range full replacement steps</span> with the element, <var>oldValue</var>'s
<span>length</span>, and the current <span data-x="concept-fe-value">value</span>'s
<span>length</span>.</p></li>

<li><p>If the element's <span data-x="concept-fe-value">value</span> (after applying the
<span>value sanitization algorithm</span>) is different from <var>oldValue</var>, and the
element has a <span data-x="concept-textarea/input-cursor">text entry cursor position</span>,
Expand Down Expand Up @@ -57618,6 +57700,7 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
undefined <span data-x="dom-textarea/input-setRangeText">setRangeText</span>(DOMString replacement);
undefined <span data-x="dom-textarea/input-setRangeText">setRangeText</span>(DOMString replacement, unsigned long start, unsigned long end, optional <span>SelectionMode</span> selectionMode = "preserve");
undefined <span data-x="dom-textarea/input-setSelectionRange">setSelectionRange</span>(unsigned long start, unsigned long end, optional DOMString direction);
[<span>CEReactions</span>, NewObject] <code>OpaqueRange</code> <span data-x="dom-textarea/input-getValueRange">getValueRange</span>(unsigned long start, unsigned long end);
};</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLTextAreaElement</code>.</dd>
Expand Down Expand Up @@ -57688,6 +57771,10 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
interaction before queuing the task; for example, a user agent could wait for the user to have not
hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously
for each keystroke.</p>
<p>Before queuing that task, if the element <a>supports opaque ranges</a>, then run the
<span>opaque range replacement steps</span> with the element, the edit's <var>offset</var>,
<span data-x="">(<var>offset</var> + <var>deleted length</var>)</span>, and <var>inserted length</var>
to describe the change.</p>
</div>
<!-- same text is present in the <input> section -->

Expand All @@ -57708,15 +57795,24 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
<p>The <span>children changed steps</span> for <code>textarea</code> elements must, if the
element's <span data-x="concept-fe-dirty">dirty value flag</span> is false, set the element's
<span data-x="concept-textarea-raw-value">raw value</span> to its <span>child text
content</span>.</p>
content</span>. If this changes the element's <span data-x="concept-textarea-raw-value">raw value</span>,
and the element <a>supports opaque ranges</a>, then the user agent must run the
<span>opaque range full replacement steps</span> with the element, the length of the previous
<span data-x="concept-fe-api-value">API value</span>, and the length of the new
<span data-x="concept-fe-api-value">API value</span>.</p>
</div>

<div algorithm>
<p>The <span data-x="concept-form-reset-control">reset algorithm</span> for <code>textarea</code>
elements is to set the <span>user validity</span> to false, the <span
data-x="concept-fe-dirty">dirty value flag</span> back to false, and the <span
data-x="concept-textarea-raw-value">raw value</span> to its <span>child text
content</span>.</p>
content</span>. If this changes the element's
<span data-x="concept-fe-api-value">API value</span>, and the element
<a>supports opaque ranges</a>, then the user agent must run the
<span>opaque range full replacement steps</span> with the element, the length of the previous
<span data-x="concept-fe-api-value">API value</span>, and the length of the new
<span data-x="concept-fe-api-value">API value</span>.</p>
</div>

<div algorithm>
Expand Down Expand Up @@ -57973,7 +58069,12 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {

<div algorithm>
<p>The <code data-x="dom-textarea-defaultValue">defaultValue</code> attribute's setter must
<span>string replace all</span> with the given value within this element.</p>
<span>string replace all</span> with the given value within this element.
If this changes the element's <span data-x="concept-textarea-raw-value">raw value</span>, and the
Copy link
Member

@annevk annevk Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We generally don't accept COMEFROM. And string replace all always changes the underlying node so "if this changes" is kinda moot anyway.

element <a>supports opaque ranges</a>, then the user agent must run the
<span>opaque range full replacement steps</span> with the element, the length of the previous
<span data-x="concept-fe-api-value">API value</span>, and the length of the new
<span data-x="concept-fe-api-value">API value</span>.</p>
</div>

<div algorithm>
Expand All @@ -57989,8 +58090,13 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
<li><p>Set this element's <span data-x="concept-textarea-raw-value">raw value</span> to the new
value.</p></li>

<li><p>Set this element's <span data-x="concept-fe-dirty">dirty value flag</span> to
true.</p></li>
<li><p>Set this element's <span data-x="concept-fe-dirty">dirty value flag</span> to true.</p></li>

<li><p>If this changes the element's <span data-x="concept-fe-api-value">API value</span>, and the
element <a>supports opaque ranges</a>, then the user agent must run the
<span>opaque range full replacement steps</span> with this element, the <span>length</span> of
<var>oldAPIValue</var>, and the <span>length</span> of the element's new
<span data-x="concept-fe-api-value">API value</span>.</p></li>

<li><p>If the new <span data-x="concept-fe-api-value">API value</span> is different from
<var>oldAPIValue</var>, then move the <span data-x="concept-textarea/input-cursor">text entry
Expand Down Expand Up @@ -61926,6 +62032,19 @@ MIT Room 32-G524

</dl>
</dd>

<dt><code data-x=""><var>range</var> = <var>element</var>.<span subdfn data-x="dom-textarea/input-getValueRange">getValueRange</span>(<var>start</var>, <var>end</var>)</code></dt>

<dd>
<p>Returns an <code data-x="dom-OpaqueRange">OpaqueRange</code> object representing the portion of the element's
<span data-x="concept-textarea/input-relevant-value">relevant value</span> from <var>start</var> to <var>end</var>.</p>

<p>Throws a <span>"<code>NotSupportedError</code>"</span> <code>DOMException</code> if the element does not <a>support opaque ranges</a>.</p>

<p>Throws an <span>"<code>IndexSizeError</code>"</span> <code>DOMException</code> if <var>start</var> or <var>end</var> is greater
than the length of the <span data-x="concept-textarea/input-relevant-value">relevant value</span>.</p>
</dd>
</dl>
</dl>

<div w-nodev>
Expand Down Expand Up @@ -62298,6 +62417,12 @@ MIT Room 32-G524

<li><p>Let <var>new end</var> be the sum of <var>start</var> and <var>new length</var>.</p></li>

<li><p>Let <var>deleted count</var> be max(0, <var>end</var> minus <var>start</var>).</p></li>

<li><p>If this element <a>supports opaque ranges</a>, then run the <span>opaque range replacement steps</span>
with this element, <var>start</var>, <span data-x="">(<var>start</var> + <var>deleted count</var>)</span>,
and <var>new length</var>.</p></li>

<li>
<p>Run the appropriate set of substeps from the following list:</p>

Expand Down
Loading