Skip to content

Integrate FormControlRange 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
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

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

Changes from all commits
Commits
Show all changes
6 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
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
148 changes: 141 additions & 7 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49830,7 +49830,11 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
is false, the user agent must set the <span data-x="concept-fe-value">value</span> of the element
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>
algorithm</span>, if one is defined.</span> If the element <a href="#supports-form-control-range">
supports form control range</a> and this operation changes its <span
data-x="concept-fe-value">value</span>, then run the <a
href="#form-control-range-full-replacement">form control range full replacement steps</a> with the
element, the old value's <span>length</span>, and the new value's <span>length</span>.</p>
</div>

<div w-nodev>
Expand Down Expand Up @@ -49877,6 +49881,12 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
data-x="concept-input-type-file-selected">selected files</span>, and then invoke the <span>value
sanitization algorithm</span>, if the <code data-x="attr-input-type">type</code> attribute's
current state defines one.</p>

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

<p>Each <code>input</code> element can be <i data-x="concept-fe-mutable">mutable</i>. Except where
Expand Down Expand Up @@ -50087,6 +50097,11 @@ 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>FormControlRange</code> object whose <a for=FormControlRange>control</a> is this
element, set that object's <a for=FormControlRange>control</a> to null and set both its <a
for=FormControlRange>start offset</a> and <a for=FormControlRange>end offset</a> to 0.</p></li>
</ol>
</div>

Expand Down Expand Up @@ -50153,6 +50168,86 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
<code data-x="dom-fae-form">form</code>, and <code data-x="dom-fe-name">name</code> IDL attributes
are part of the element's forms API.</p>

<p>The following concepts and algorithms integrate the {{FormControlRange}} interface (defined in
the DOM Standard) with HTML form controls.</p>

<p>A {{FormControlRange}} object is <dfn id=form-control-range-associated export>associated</dfn>
with an element if its <a for=FormControlRange>control</a> is that element. An element's <dfn
id=form-control-ranges export>form control ranges</dfn> are the {{FormControlRange}} objects
associated with it.</p>

<div algorithm>
<p>The <dfn id=form-control-range-adjustment export>form control range value mutation algorithm</dfn>
updates each {{FormControlRange}} associated with a <a href="#supports-form-control-range">supported</a>
text control when a contiguous substring of its {{FormControlRange/value string}}
is replaced. It is passed an element <var>el</var>, non‑negative integers <var>start</var>,
<var>oldLength</var> (removed length), and <var>newLength</var> (inserted length). Let <var>delta</var> =
<var>newLength</var> − <var>oldLength</var>. For each {{FormControlRange}} object <var>range</var> in
<var>el</var>'s <a>form control ranges</a>:</p>
<ol>
<li><p>Let <var>rs</var> be <var>range</var>'s <a for=FormControlRange>start offset</a>; let <var>re</var>
be its <a for=FormControlRange>end offset</a>.</p></li>

<li><p>Let <var>editStart</var> be <var>start</var>; let <var>editEnd</var> be <var>start</var> +
<var>oldLength</var>.</p></li>

<li><p>If <var>editEnd</var> ≤ <var>rs</var>, then (edit strictly before range) set <var>rs</var> =
<var>rs</var> + <var>delta</var> and <var>re</var> = <var>re</var> + <var>delta</var> and jump to step
<i>Clamp</i>.</p></li>

<li><p>If <var>editStart</var> ≥ <var>re</var>, then (edit strictly after range) jump to step
<i>Clamp</i>.</p></li>

<li><p>(Overlapping removal) If <var>oldLength</var> &gt; 0, then:</p>
<ol>
<li><p>If <var>rs</var> ≥ <var>editStart</var> and <var>rs</var> &lt; <var>editEnd</var>, set
<var>rs</var> = <var>editStart</var>.</p></li>

<li><p>If <var>re</var> ≥ <var>editStart</var> and <var>re</var> &lt; <var>editEnd</var>, set
<var>re</var> = <var>editStart</var>.</p></li>
</ol>
</li>

<li><p>(Replacement insertion remap) If <var>oldLength</var> &gt; 0 and <var>newLength</var> &gt; 0
and <var>editStart</var> ≤ <var>rs</var> ≤ <var>re</var> ≤ <var>editEnd</var>, then for each boundary
(<var>rs</var> then <var>re</var>): let <var>offsetWithin</var> be that boundary's original value −
<var>editStart</var>; set boundary = <var>editStart</var> + min(<var>offsetWithin</var>,
<var>newLength</var>).</p></li>

<li><p>(Pure insertion) If <var>oldLength</var> = 0 and <var>newLength</var> &gt; 0 and
<var>editStart</var> is within [<var>rs</var>, <var>re</var>] then:</p>
<ol>
<li><p>If <var>rs</var> = <var>re</var> (collapsed), set <var>rs</var> = <var>re</var> = <var>rs</var>
+ <var>newLength</var>.</p></li>

<li><p>Otherwise, if <var>editStart</var> = <var>rs</var>, set <var>re</var> = <var>re</var> +
<var>newLength</var>. (Insertion at start expands.)</p></li>

<li><p>Otherwise, if <var>editStart</var> = <var>re</var>, do nothing. (Insertion at end does not
expand.)</p></li>
</ol>
</li>

<li><p><strong><i>Clamp</i></strong>: Let <var>valueLen</var> be the <span>length</span> of
<var>el</var>'s current {{FormControlRange/value string}}. Set <var>rs</var> =
min(<var>rs</var>, <var>valueLen</var>) and <var>re</var> = min(<var>re</var>, <var>valueLen</var>). If
<var>rs</var> &gt; <var>re</var>, then set <var>re</var> = <var>rs</var>.</p></li>

<li><p>Set <var>range</var>'s <a for=FormControlRange>start offset</a> to <var>rs</var> and its <a
for=FormControlRange>end offset</a> to <var>re</var>.</p></li>
</ol>
<p class=note>This algorithm mirrors {{Range}} boundary adjustment rules, operating instead on the
UTF-16 code unit indices of a form control's value string.</p>
<p><a id=adjust-form-control-ranges hidden></a></p>
</div>

<p>The <dfn id=form-control-range-full-replacement export>form control range full replacement steps</dfn>
for an element <var>el</var> with previous value length <var>oldLength</var> and new value length
<var>newLength</var> are to run the <a href="#form-control-range-adjustment">form control range value
mutation algorithm</a> with <var>el</var>, 0, <var>oldLength</var>, and <var>newLength</var>.</p>

<p class=note>User agents typically call the algorithm explicitly at each value mutation point; it is not
implicitly invoked by unspecified text modifications.</p>
</div>


Expand Down Expand Up @@ -54799,6 +54894,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 href="#supports-form-control-range">supports form control
range</a>, then run the <a href="#form-control-range-full-replacement">form control range full
replacement steps</a> with <var>element</var>, <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 @@ -57529,6 +57630,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, the user agent must run the
<a href="#form-control-range-adjustment">form control range value mutation algorithm</a> for this
element, using the edit's <var>offset</var>, <var>deleted length</var>, and <var>inserted length</var>
to describe the change.</p>
</div>
<!-- same text is present in the <input> section -->

Expand All @@ -57549,15 +57654,23 @@ 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>,
then run the <a href="#form-control-range-adjustment">form control range value mutation algorithm</a>
for the element, with a change offset of 0, a deleted length equal to the length of the previous
<span data-x="concept-fe-api-value">API value</span>, and an inserted length equal to 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>,
then run the <a href="#form-control-range-adjustment">form control range value mutation algorithm</a>
for the element, with a change offset of 0, a deleted length equal to the length of the previous
<span data-x="concept-fe-api-value">API value</span>, and an inserted length equal to the length
of the new <span data-x="concept-fe-api-value">API value</span>.</p>
</div>

<div algorithm>
Expand Down Expand Up @@ -57814,7 +57927,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>,
then run the <a href="#form-control-range-adjustment">form control range value mutation algorithm</a>
for the element, with a change offset of 0, a deleted length equal to the length of the previous
<span data-x="concept-fe-api-value">API value</span>, and an inserted length equal to the length
of the new <span data-x="concept-fe-api-value">API value</span>.</p>
</div>

<div algorithm>
Expand All @@ -57830,8 +57948,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>, then run the
<a href="#form-control-range-adjustment">form control range value mutation algorithm</a> for this
element, with a change offset of 0, a deleted length equal to the <span>length</span> of
<var>oldAPIValue</var>, and an inserted length equal to 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 @@ -61689,6 +61812,11 @@ MIT Room 32-G524

<h4 id="textFieldSelection">APIs for the text control selections</h4>

<p class="note">
Text-entry controls support <code>FormControlRange</code>. Liveness is maintained by HTML's
<a href="#algo-adjust-fcr">form-control range adjustment</a> algorithm, and the algorithms
in this section invoke it whenever they modify a control's value string.</p>

<!-- v2 idea: DOM Range APIs to expose the textarea/input edited value (ack martijnw) -->

<p>The <code>input</code> and <code>textarea</code> elements define several attributes and methods
Expand Down Expand Up @@ -62137,7 +62265,13 @@ MIT Room 32-G524
<li><p>Let <var>new length</var> be the <span>length</span> of the value of the first
argument.</p></li>

<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>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 href="#supports-form-control-range">supports form control range</a>,
then run the <a href="#form-control-range-adjustment">form control range value mutation algorithm</a>
with this element, <var>start</var>, <var>deleted count</var>, and <var>new length</var>.</p></li>

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