Skip to content

Commit

Permalink
Add the enterkeyhint="" attribute
Browse files Browse the repository at this point in the history
This allows an author to configure what type of icon is displayed in
place of the enter key on virtual keyboards.

Tests: web-platform-tests/wpt#12972
  • Loading branch information
dtapuska authored and mustaqahmed committed Feb 15, 2019
1 parent 8299b10 commit b62837a
Showing 1 changed file with 77 additions and 0 deletions.
77 changes: 77 additions & 0 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -11364,6 +11364,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
<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>
<li><code data-x="attr-enterkeyhint">enterkeyhint</code></li>
<li><code data-x="attr-hidden">hidden</code></li>
<li><code data-x="attr-inputmode">inputmode</code></li>
<li><code data-x="attr-is">is</code></li>
Expand Down Expand Up @@ -73699,6 +73700,7 @@ addShortcutKeyLabel(document.getElementById('c'));</code></pre>

<pre><code class="idl" data-x="">interface mixin <dfn>ElementContentEditable</dfn> {
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-contentEditable">contentEditable</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-enterKeyHint">enterKeyHint</span>;
readonly attribute boolean <span data-x="dom-isContentEditable">isContentEditable</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-inputMode">inputMode</span>;
};</code></pre>
Expand Down Expand Up @@ -74377,6 +74379,70 @@ body { display:none }

</div>

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

<p>User agents can support the <code data-x="attr-enterkeyhint">enterkeyhint</code>
attribute on form controls (such as the value of <code>textarea</code> elements), or in elements
in an <span>editing host</span> (e.g., using <code
data-x="attr-contenteditable">contenteditable</code>).</p>

<p>The <dfn><code data-x="attr-enterkeyhint">enterkeyhint</code></dfn> content attribute is an
<span>enumerated attribute</span> that specifies what action label (or icon) to present for the
enter key on virtual keyboards. This allows authors to customize the presentation of the enter key
in order to make it more helpful for users.</p>

<table>
<thead>
<tr>
<th> Keyword
<th> Description
<tbody>
<tr>
<td><dfn><code data-x="attr-enterkeyhint-keyword-enter">enter</code></dfn>
<td>The user agent should present a cue for the operation 'enter', typically
inserting a new line.
<tr>
<td><dfn><code data-x="attr-enterkeyhint-keyword-done">done</code></dfn>
<td>The user agent should present a cue for the operation 'done', typically
meaning there is nothing more to input and the IME will be closed.
<tr>
<td><dfn><code data-x="attr-enterkeyhint-keyword-go">go</code></dfn>
<td> The user agent should present a cue for the operation 'go', typically
meaning to take the user to the target of the text they typed.
<tr>
<td><dfn><code data-x="attr-enterkeyhint-keyword-next">next</code></dfn>
<td>The user agent should present a cue for the operation 'next', typically
taking the user to the next field that will accept text.
<tr>
<td><dfn><code data-x="attr-enterkeyhint-keyword-previous">previous</code></dfn>
<td>The user agent should present a cue for the operation 'previous', typically
taking the user to the previous field that will accept text.
<tr>
<td><dfn><code data-x="attr-enterkeyhint-keyword-search">search</code></dfn>
<td>The user agent should present a cue for the operation 'search', typically
taking the user to the results of searching for the text they have typed.
<tr>
<td><dfn><code data-x="attr-enterkeyhint-keyword-send">send</code></dfn>
<td> The user agent should present a cue for the operation 'send', typically
delivering the text to its target.
</table>

<div w-nodev>

<p>The <dfn><code data-x="dom-enterKeyHint">enterKeyHint</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-enterkeyhint">enterkeyhint</code> content
attribute, <span>limited to only known values</span>.</p>

<p>When <code data-x="attr-enterkeyhint">enterkeyhint</code> is unspecified (or is in a state not
supported by the user agent), the user agent should determine the default action label (or icon)
to present. Contextual information such as the <code data-x="attr-inputmode">inputmode</code>,
<code data-x="attr-input-type">type</code>, or <code data-x="attr-input-pattern">pattern</code>
attributes should be used to determine which action label (or icon) to present on the virtual
keyboard.</p>

</div>

<h3 split-filename="dnd" id="dnd"><dfn>Drag and drop</dfn></h3>

<!-- v2: ideas for drag and drop:
Expand Down Expand Up @@ -118274,6 +118340,17 @@ interface <dfn>External</dfn> {
<td> <code data-x="attr-fs-enctype">form</code>
<td> Entry list encoding type to use for <span>form submission</span>
<td> "<code data-x="attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</code>"; "<code data-x="attr-fs-enctype-formdata">multipart/form-data</code>"; "<code data-x="attr-fs-enctype-text">text/plain</code>"
<tr>
<th> <code data-x="">enterkeyhint</code>
<td> <span data-x="attr-enterkeyhint">HTML elements</span>
<td> Hint for selecting an enter key action
<td> "<code data-x="attr-enterkeyhint-keyword-enter">enter</code>";
"<code data-x="attr-enterkeyhint-keyword-done">done</code>";
"<code data-x="attr-enterkeyhint-keyword-go">go</code>";
"<code data-x="attr-enterkeyhint-keyword-next">next</code>";
"<code data-x="attr-enterkeyhint-keyword-previous">previous</code>";
"<code data-x="attr-enterkeyhint-keyword-search">search</code>"
"<code data-x="attr-enterkeyhint-keyword-send">send</code>"
<tr>
<th> <code data-x="">for</code>
<td> <code data-x="attr-label-for">label</code>
Expand Down

0 comments on commit b62837a

Please sign in to comment.