Skip to content

Commit

Permalink
Add the autocapitalize attribute
Browse files Browse the repository at this point in the history 
Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=28228.

This matches iOS Safari's until-now-unspecified semantics, which Chrome
for Android is converging on.
  • Loading branch information
@rlanday
rlanday authored and Alice Boxhall committed Jan 7, 2019
1 parent 3d43d5e commit 9de3b17
Showing 1 changed file with 184 additions and 3 deletions.
187 changes: 184 additions & 3 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10083,6 +10083,7 @@ interface <dfn>HTMLElement</dfn> : <span>Element</span> {
readonly attribute DOMString <span data-x="dom-accessKeyLabel">accessKeyLabel</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-draggable">draggable</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-spellcheck">spellcheck</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-autocapitalize">autocapitalize</span>;

[<span>CEReactions</span>] attribute [TreatNullAs=EmptyString] DOMString <span data-x="dom-innerText">innerText</span>;
};
Expand Down Expand Up @@ -11285,6 +11286,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%

<ul class="brief">
<li><code data-x="attr-accesskey">accesskey</code></li>
<li><code data-x="attr-autocapitalize">autocapitalize</code></li>
<li><code data-x="attr-contenteditable">contenteditable</code></li>
<li><code data-x="attr-dir">dir</code></li>
<li><code data-x="attr-draggable">draggable</code></li>
Expand Down Expand Up @@ -74164,9 +74166,11 @@ body { display:none }
<p>The definition of the terms
<dfn data-x-href="https://w3c.github.io/editing/execCommand.html#active-range">active range</dfn>,
<dfn data-x-href="https://w3c.github.io/editing/execCommand.html#editing-host">editing host</dfn>,
and <dfn data-x-href="https://w3c.github.io/editing/execCommand.html#editable">editable</dfn>, the
user interface requirements of elements that are <span data-x="editing host">editing hosts</span>
or <span>editable</span>, the
<dfn data-x-href="https://w3c.github.io/editing/execCommand.html#editing-host-of">editing host
of</dfn>, and <dfn
data-x-href="https://w3c.github.io/editing/execCommand.html#editable">editable</dfn>, the user
interface requirements of elements that are <span data-x="editing host">editing hosts</span> or
<span>editable</span>, the

<dfn data-x="dom-document-execCommand" id="execCommand" data-x-href="https://w3c.github.io/editing/execCommand.html#execcommand%28%29"><code>execCommand()</code></dfn>,
<dfn data-x-href="https://w3c.github.io/editing/execCommand.html#querycommandenabled%28%29"><code data-x="dom-document-queryCommandEnabled">queryCommandEnabled()</code></dfn>,
Expand Down Expand Up @@ -74390,6 +74394,172 @@ body { display:none }
checkers. A user agent could offer on-demand checking, could perform continuous checking while the
checking is enabled, or could use other interfaces.</p>

<h4>Autocapitalization</h4>

<p>Some methods of entering text, for example virtual keyboards on mobile devices, and also voice
input, often assist users by automatically capitalizing the first letter of sentences (when
composing text in a language with this convention). A virtual keyboard that implements
autocapitalization might automatically switch to showing uppercase letters (but allow the user to
toggle it back to lowercase) when a letter that should be autocapitalized is about to be typed.
Other types of input, for example voice input, may perform autocapitalization in a way that does
not give users an option to intervene first. The <code
data-x="attr-autocapitalize">autocapitalize</code> attribute allows authors to control such
behavior.</p>

<p>The <code data-x="attr-autocapitalize">autocapitalize</code> attribute, as typically
implemented, does not affect behavior when typing on a physical keyboard. (For this reason, as
well as the ability for users to override the autocapitalization behavior in some cases or edit
the text after initial input, the attribute must not be relied on for any sort of input
validation.)</p>

<p>The <code data-x="attr-autocapitalize">autocapitalize</code> attribute can be used on an <span
data-x="editing host">editing host</span> to control autocapitalization behavior for the hosted
editable region, on an <code>input</code> or <code>textarea</code> element to control the behavior
for inputting text into that element, or on a <code>form</code> element to control the default
behavior for that form's <code>input</code> and <code>textarea</code> elements.</p>

<p>The <code data-x="attr-autocapitalize">autocapitalize</code> attribute never causes
autocapitalization to be enabled for <code>input</code> elements whose <code
data-x="attr-input-type">type</code> attribute is in one of the <span
data-x="attr-input-type-url">URL</span>, <span
data-x="attr-input-type-email">E-mail</span>, or <span
data-x="attr-input-type-password">Password</span> states.<span w-nodev> (This behavior is included
in the <span data-x="used autocapitalization hint">used autocapitalization hint</span> algorithm
below.)</span></p>

<p>The autocapitalization processing model is based on selecting among five
<dfn data-x="autocapitalization hint">autocapitalization hints</dfn>, defined as follows:</p>

<dl>
<dt><dfn data-x="autocap-hint-default">default</dfn></dt>
<dd><p>The user agent and input method should use make their own determination of whether or not
to enable autocapitalization.</p></dd>

<dt><dfn data-x="autocap-hint-none">none</dfn></dt>
<dd><p>No autocapitalization should be applied (all letters should default to
lowercase).</p></dd>

<dt><dfn data-x="autocap-hint-sentences">sentences</dfn></dt>
<dd><p>The first letter of each sentence should default to a capital letter; all other letters
should default to lowercase.</p></dd>

<dt><dfn data-x="autocap-hint-words">words</dfn></dt>
<dd><p>The first letter of each word should default to a capital letter; all other letters should
default to lowercase.</p></dd>

<dt><dfn data-x="autocap-hint-characters">characters</dfn></dt>
<dd><p>All letters should default to uppercase.</p></dd>
</dl>

<p>The <dfn><code data-x="attr-autocapitalize">autocapitalize</code></dfn> attribute is an
<span>enumerated attribute</span> whose states are the possible <span data-x="autocapitalization
hint">autocapitalization hints</span>. The <span>autocapitalization hint</span> specified by the
attribute's state combines with other considerations to form the <span>used autocapitalization
hint</span>, which informs the behavior of the user agent. The keywords for this attribute and
their state mappings are as follows:</p>

<table>
<thead>
<tr>
<th> Keyword
<th> State
<tbody>
<tr>
<td><dfn><code data-x="attr-autocapitalize-off">off</code></dfn>
<td rowspan="2"><span data-x="autocap-hint-none">none</span>
<tr>
<td><dfn><code data-x="attr-autocapitalize-none">none</code></dfn>
<tr>
<td><dfn><code data-x="attr-autocapitalize-on">on</code></dfn>
<td rowspan="2"><span data-x="autocap-hint-sentences">sentences</span>
<tr>
<td><dfn><code data-x="attr-autocapitalize-sentences">sentences</code></dfn>
<tr>
<td><dfn><code data-x="attr-autocapitalize-words">words</code></dfn>
<td><span data-x="autocap-hint-words">words</span>
<tr>
<td><dfn><code data-x="attr-autocapitalize-characters">characters</code></dfn>
<td><span data-x="autocap-hint-characters">characters</span>
</table>

<p>The <i data-x="invalid value default">invalid value default</i> is the <span
data-x="autocap-hint-sentences">sentences</span> state. The <i data-x="missing value
default">missing value default</i> is the <span data-x="autocap-hint-default">default</span>
state.</p>

<dl class="domintro">
<dt><var>element</var> . <code subdfn data-x="dom-autocapitalize">autocapitalize</code> [ = <var>value</var> ]</dt>

<dd>
<p>Returns the current autocapitalization state for the element, or an empty string if it hasn't
been set. Note that for <code>input</code> and <code>textarea</code> elements that inherit their
state from a <code>form</code> element, this will return the autocapitalization state of the
<code>form</code> element, but for an element in an editable region, this will not return the
autocapitalization state of the editing host (unless this element is, in fact, the <span>editing
host</span>).</p>

<p>Can be set, to set the <code data-x="attr-autocapitalize">autocapitalize</code> content
attribute (and thereby change the autocapitalization behavior for the element).</p>
</dd>
</dl>

<div w-nodev>

<p>To compute the <dfn>own autocapitalization hint</dfn> of an element <var>element</var>, run the
following steps:</p>

<ol>
<li><p>If the <code data-x="attr-autocapitalize">autocapitalize</code> content attribute is
present on <var>element</var>, and its value is not the empty string, return the state of the
attribute.</p></li>

<li><p>If <var>element</var> is an <code>input</code> or <code>textarea</code> element and has a
non-null <span>form owner</span>, return the <span>own autocapitalization hint</span> of
<var>element</var>'s <span>form owner</span>.</p></li>

<li><p>Return <span data-x="autocap-hint-default">default</span>.</p></li>
</ol>

<p>The <dfn><code data-x="dom-autocapitalize">autocapitalize</code></dfn> IDL attribute, on
getting, must return the string value corresponding to <span>own autocapitalization hint</span> of
the element, with the exception that the <span data-x="autocap-hint-default">default</span> state
maps to the empty string. On setting, it must set the <code
data-x="attr-autocapitalize">autocapitalize</code> content attribute to the given new value.</p>

<hr>

<p>User agents that support customizable autocapitalization behavior for a text input method and
wish to allow web developers to control this functionality should, during text input into an
element, compute the <dfn>used autocapitalization hint</dfn> for the element. This will be an
<span>autocapitalization hint</span> that describes the recommended autocapitalization behavior
for text input into the element.</p>

<p>User agents or input methods may choose to ignore or override the <span>used autocapitalization
hint</span> in certain circumstances.</p>

<p>The <span>used autocapitalization hint</span> for an element <var>element</var> is computed
using the following algorithm:</p>

<ol>
<li><p>If <var>element</var> is an <code>input</code> element whose <code
data-x="attr-input-type">type</code> attribute is in one of the <span
data-x="attr-input-type-url">URL</span>, <span data-x="attr-input-type-email">E-mail</span>, or
<span data-x="attr-input-type-password">Password</span> states, then return <span
data-x="autocap-hint-default">default</span>.</p></li>

<li><p>If <var>element</var> is an <code>input</code> element or a <code>textarea</code> element,
then return <var>element</var>'s <span>own autocapitalization hint</span>.</p></li>

<li><p>If <var>element</var> is an <span>editing host</span> or an <span>editable</span> element,
then return the <span>own autocapitalization hint</span> of the <span>editing host of</span>
<var>element</var>.</p></li>

<li><p>Assert: this step is never reached, since text input only occurs in elements that meet one
of the above criteria.</p></li>
</ol>

</div>


<h4>Input modalities: the <code data-x="attr-inputmode">inputmode</code> attribute</h4>

Expand Down Expand Up @@ -117649,6 +117819,16 @@ interface <dfn>External</dfn> {
<td> <code data-x="attr-script-async">script</code>
<td> Execute script when available, without blocking
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">autocapitalize</code>
<td> <span data-x="attr-autocapitalize">HTML elements</span>
<td> Recommended autocapitalization behavior (for supported input methods)
<td> "<code data-x="attr-autocapitalize-on">on</code>";
"<code data-x="attr-autocapitalize-off">off</code>";
"<code data-x="attr-autocapitalize-none">none</code>";
"<code data-x="attr-autocapitalize-sentences">sentences</code>";
"<code data-x="attr-autocapitalize-words">words</code>";
"<code data-x="attr-autocapitalize-characters">characters</code>"
<tr>
<th> <code data-x="">autocomplete</code>
<td> <code data-x="attr-form-autocomplete">form</code>
Expand Down Expand Up @@ -121224,6 +121404,7 @@ INSERT INTERFACES HERE
Russell Bicknell,
Ruud Steltenpool,
Ryan King,
Ryan Landay,
Ryan Sleevi,
Ryo Kato,
Ryosuke Niwa,
Expand Down

0 comments on commit 9de3b17

Please sign in to comment.