入力イベント レベル 1

W3C 廃止ドラフト

この文書の詳細
このバージョン:
https://www.w3.org/TR/2023/DISC-input-events-1-20230928/
最新公開バージョン:
https://www.w3.org/TR/input-events-1/
最新エディタ草案:
https://w3c.github.io/input-events/
履歴:
https://www.w3.org/standards/history/input-events-1/
コミット履歴
編集者:
(招待専門家)
前編集者:
(Microsoft) (2015年2月23日まで)
フィードバック:
GitHub w3c/input-events (プルリクエスト, 新しい課題, オープン課題)
レベルごとの最新公開バージョン
レベル 1
レベル 2
レベルごとの最新エディタ草案
レベル 1
レベル 2

概要

この仕様は、テキストや関連する入力のイベントに追加を定義し、テキストエディターアプリケーションやテキスト入力・テキスト整形を扱う他のアプリケーションにおいて、ブラウザーのデフォルト動作を監視・操作できるようにします。この仕様は、UI イベント仕様 [UI-EVENTS] を基盤としています。

この文書のステータス

このセクションは、公開時点でのこの文書のステータスについて説明しています。現行の W3C 公開文書と本技術レポートの最新改訂版は、W3C 技術報告一覧(https://www.w3.org/TR/)で確認できます。

Input Events Level 1 は Input Events の最初のバージョンです [INPUT-EVENTS]。

Input Events 仕様の テストスイート実装レポート は、現在も作業中です。

この文書は Web Editing Working Group によって 勧告トラックを使用し、廃止ドラフトとして公開されました。

廃止ドラフトとして公開されたことは、W3C およびそのメンバーによる承認を意味するものではありません。

廃止ドラフトとして公開された文書は、今後の発展や保守を意図していません。廃止された作業以外の目的でこの文書を引用するのは不適切です。

この文書は W3C 特許ポリシーに基づき運用されるグループによって作成されました。 W3C関連する特許開示の公開リスト を維持しています。そのページには特許開示の方法も記載されています。特許に関する実際の知識があり、その特許に 必須クレーム が含まれていると考えられる場合は、 W3C 特許ポリシー第6節に従って情報を開示しなければなりません。

この文書は 2023年6月12日 W3Cプロセス文書 に従って管理されています。

1. はじめに

本文書では編集に関連する追加事項について、UI イベント仕様[UI-EVENTS]で記述されている input および beforeinput の2つのイベントに関する説明を行います。 これらのイベントの目的は、著者が編集前後のデフォルト編集動作を把握したり、上書きできるようにすることです。

2. 定義

DataTransfer
DataTransfer オブジェクトは、いくつかの inputtypes に対してリッチテキストやプレーンテキストデータを保持します。[HTML]
意図の表明
ユーザーは、キーボード、IME、音声、または類似の方法を使って 特定の編集操作を実行する意図を表明できます。 特定の入力操作は、プラットフォーム固有の慣習に従って意図にマッピングされます。
キルバッファ

この定義は規範的ではありません。

キルバッファは、クリップボードとは別のリッチテキストコンテンツ用のインメモリストアであり、 特定の削除コマンドで削除されたコンテンツを一時的に保存できます。 ユーザーは「ヤンク」の意図を示すことで、 キルバッファ内の内容で現在の選択範囲を置換できます。
文字
文字は、拡張書記素クラスタです。[UAX29]

3. 解決される課題

このセクションは規範的ではありません。

ウェブベースのテキストエディターを作成するには、ブラウザーコードに加え、かなりの量の JavaScript が必要です。その理由として、以下が挙げられます。

  1. ブラウザーはすべての編集操作を同じように処理するわけではありません。
  2. ブラウザーは特定の編集操作の処理にバグがあることが多いです。
  3. 個々のサイトごとに、編集操作の扱いに独自の要件がある場合があります。
  4. ブラウザーにおける高レベルのテキスト編集機能の開発は、Extensible Web Manifestoの原則に従っておらず、ウェブ開発者コミュニティのニーズと常に連携しているわけではありません。

この仕様は、beforeinput イベントを介してウェブ開発者がテキスト編集に関するすべてのユーザー入力処理をブラウザー上書きできるシンプルな方法と、 input イベントでユーザー入力によってブラウザーが DOM に加えた変更を監視できる方法の提供を目指します。

4. ユースケース

このセクションは規範的ではありません。

  1. JavaScript テキストエディターを作成し、すべてのブラウザーにアクセスできなくても、ユーザーが太字としてマークしたテキストを <b> タグではなく <strong> タグでマークするようにする。
  2. JavaScript が編集されたテキストの DOM へのレンダリングを担当し、裏でデータモデルに従って動作する JavaScript テキストエディターを作成する。
  3. 太字のみ許可し、斜体は許可しないなど、リッチテキスト編集の一部のみを許可する JavaScript エディターを作成する。
  4. ユーザーが異なるブラウザーで異なる意図表現方法を用いる場合でも、ユーザーの意図に基づいて JavaScript が DOM への変更をレンダリングする協働型エディターを作成する。
  5. 一部のユーザーのみテキストの追加・削除が可能で、他のユーザーのみ特定の書式設定の追加・削除が可能な、異なるアクセス権限を持つ JavaScript エディターを作成する。

5. Input イベントタイプ

Input イベントは、ユーザーがマークアップの編集を試みる前(beforeinput イベント)および後(input イベント)に送信されます。これには、コンテンツの挿入・削除や書式変更が含まれます。

Input イベントは、編集ホストとして機能する要素、つまり contenteditable 属性が設定された要素、textarea 要素、そして input テキスト入力を許可する要素上で発行 [UI-EVENTS]されます。

5.1 InputEvent インターフェイス

WebIDLpartial interface InputEvent {
   readonly attribute DataTransfer? dataTransfer;
   sequence<StaticRange> getTargetRanges();
};

partial dictionary InputEventInit {
   DataTransfer? dataTransfer = null;
   sequence<StaticRange> targetRanges = [];
};

InputEvent および InputEventInit オブジェクトは[UI-EVENTS]で定義されています。

inputTypedataTransfertargetRanges の属性は、 InputEventInitInputEventオブジェクトの対応する属性を初期化します。

5.1.1 概要

このセクションは規範的ではありません。

次の表は、data および dataTransfer 属性が値を持つ場合と null になる場合、 また getTargetRanges() メソッドが空または非空の配列を返すタイミングについて、inputType ごとにまとめたものです。

編集ホスト inputType data dataTransfer getTargetRanges()
Contenteditable "insertText", "insertCompositionText", "formatSetBlockTextDirection", "formatSetInlineTextDirection", "formatBackColor", "formatFontColor", "formatFontName", "insertLink" Yes null 非空配列
Contenteditable "insertFromPaste", "insertFromPasteAsQuotation", "insertFromDrop", "insertReplacementText", "insertFromYank" null Yes 非空配列
<textarea>, <input type="text"> "insertText", "insertCompositionText", "insertFromPaste", "insertFromPasteAsQuotation", "insertFromDrop", "insertReplacementText", "insertFromYank", "formatSetBlockTextDirection", "formatSetInlineTextDirection", "formatBackColor", "formatFontColor", "formatFontName", "insertLink" Yes null 空配列
All "historyUndo", "historyRedo" null null 空配列
Contenteditable その他すべて null null 非空配列
<textarea>, <input type="text"> その他すべて null null 空配列

5.1.2 属性

beforeinput イベントがキャンセル可能かどうかは inputType に依存します。

どの inputType が選択されるかは、ユーザーの 意図の表明、編集が IME の構成中かどうか、および選択範囲の状態によって決まります。

本仕様では、inputType 値を次の表の inputType 列に示す値として定義します。

inputType ユーザーの意図の表明 IME構成の一部 beforeinput キャンセル可能 選択範囲の状態
"insertText" 入力されたプレーンテキストの挿入 いいえ 未定義 任意
"insertReplacementText" スペルチェッカーや自動修正などによる既存テキストの置換 いいえ 未定義 任意
"insertLineBreak" 改行挿入 いいえ 未定義 任意
"insertParagraph" 段落区切りの挿入 いいえ 未定義 任意
"insertOrderedList" 番号付きリストの挿入 いいえ はい 任意
"insertUnorderedList" 箇条書きリストの挿入 いいえ はい 任意
"insertHorizontalRule" 水平線の挿入 いいえ はい 任意
"insertFromYank" 現在の選択範囲をキルバッファに保存された内容で置換 いいえ はい 任意
"insertFromDrop" ドロップ操作による内容の挿入 いいえ はい 任意
"insertFromPaste" 貼り付け いいえ はい 任意
"insertFromPasteAsQuotation" 引用として内容を貼り付け いいえ はい 任意
"insertTranspose" 直前に入力された文字2つを入れ替える いいえ はい 任意
"insertCompositionText" 現在の構成文字列を置換 はい いいえ 任意
"insertLink" リンク挿入 いいえ はい 任意
"deleteWordBackward" キャレット位置の直前の単語を削除 いいえ 未定義 折り畳み
"deleteWordForward" キャレット位置の直後の単語を削除 いいえ 未定義 折り畳み
"deleteSoftLineBackward" キャレットから視覚的な改行位置まで直前を削除 いいえ 未定義 折り畳み
"deleteSoftLineForward" キャレットから視覚的な改行位置まで直後を削除 いいえ 未定義 折り畳み
"deleteEntireSoftLine" キャレット直前の視覚的改行位置からキャレット直後の視覚的改行位置まで削除 いいえ 未定義 折り畳み
"deleteHardLineBackward" キャレットから直前のブロック要素または br 要素まで削除 いいえ 未定義 折り畳み
"deleteHardLineForward" キャレットから直後のブロック要素または br 要素まで削除 いいえ 未定義 折り畳み
"deleteByDrag" ドラッグ操作による内容の削除 いいえ はい 任意
"deleteByCut" カット操作による選択範囲の削除 いいえ はい 任意
"deleteContent" 削除の方向を指定せず、他の inputType に該当しない選択範囲の削除 いいえ 未定義 折り畳みでない
"deleteContentBackward" キャレット直前の内容の削除(他の inputType に該当しない場合)、または削除後に選択範囲が先頭に折り畳まれる場合の選択範囲の削除 いいえ 未定義 任意
"deleteContentForward" キャレット直後の内容の削除(他の inputType に該当しない場合)、または削除後に選択範囲が末尾に折り畳まれる場合の選択範囲の削除 いいえ 未定義 任意
"historyUndo" 最後の編集操作の取り消し いいえ はい 任意
"historyRedo" 直前の取り消し操作のやり直し いいえ はい 任意
"formatBold" 太字テキストの開始 いいえ はい 任意
"formatItalic" 斜体テキストの開始 いいえ はい 任意
"formatUnderline" 下線テキストの開始 いいえ はい 任意
"formatStrikeThrough" 取り消し線テキストの開始 いいえ はい 任意
"formatSuperscript" 上付きテキストの開始 いいえ はい 任意
"formatSubscript" 下付きテキストの開始 いいえ はい 任意
"formatJustifyFull" 選択範囲の両端揃え いいえ はい 任意
"formatJustifyCenter" 選択範囲の中央揃え いいえ はい 任意
"formatJustifyRight" 選択範囲の右揃え いいえ はい 任意
"formatJustifyLeft" 選択範囲の左揃え いいえ はい 任意
"formatIndent" 選択範囲のインデント いいえ はい 任意
"formatOutdent" 選択範囲のインデント解除 いいえ はい 任意
"formatRemove" 選択範囲の書式設定をすべて削除 いいえ はい 任意
"formatSetBlockTextDirection" テキストブロックの方向を設定 いいえ はい 任意
"formatSetInlineTextDirection" テキストのインライン方向を設定 いいえ はい 任意
"formatBackColor" 背景色の変更 いいえ はい 任意
"formatFontColor" フォント色の変更 いいえ はい 任意
"formatFontName" フォントファミリーの変更 いいえ はい 任意
他の仕様でこの定義が拡張される場合があります。
上記の inputTypes が存在するからといって、すべての実装がこれらをサポートするとは限りません。ただし、あるブラウザーが DOM の変更につながる編集操作をサポートする場合、対応する beforeinput および input イベントを発行[UI-EVENTS]しなければなりません。
選択範囲が折り畳みの場合、"deleteContentBackward" はユーザーがテキストノード内のテキスト削除を要求した場合や、キャレットがテキストノードの先頭にあり、より複雑な要素の削除や段落結合の意図を示した場合にも使用されます。
選択範囲が折り畳みの場合、"deleteContentForward" はユーザーがテキストノード内のテキスト削除を要求した場合や、キャレットがテキストノードの末尾にあり、より複雑な要素の削除や段落結合の意図を示した場合にも使用されます。

この注は規範的ではありません。

一部のスクリプトやプラットフォームでは、折り畳み選択かつテキストノード内の後方削除時に、全書記素クラスタではなくコードポイント[INFRA]のみ削除されます。getTargetRanges() メソッドで、テキストノード内削除時にブラウザーがデフォルトで削除するコードポイント数を調べることができます。

この注は規範的ではありません。

一部のスクリプトやプラットフォームでは、折り畳み選択かつテキストノード内の前方削除時に、単一のコードポイント[INFRA]ではなく、全書記素クラスタ[UAX29]が削除されます。getTargetRanges() メソッドで、テキストノード内削除時にブラウザーがデフォルトで削除するコードポイント数を調べることができます。

data は、文書に追加されるプレーンテキストデータに関する情報を保持します。

inputType 編集ホスト data
"insertText" または "insertCompositionText" 任意 挿入されるプレーンテキスト文字列
"insertFromPaste", "insertFromPasteAsQuotation", "insertFromDrop", "insertTranspose", "insertReplacementText" または "insertFromYank" input または textarea 挿入されるプレーンテキスト文字列
"formatSetInlineTextDirection" または "formatSetBlockTextDirection" 任意 "ltr", "rtl", "auto" または "null"
"formatBackColor" または "formatFontColor" 任意 CSS コンポーネント値の直列化文字列[CSSOM](提案色)
"formatFontName" 任意 font-family CSS プロパティの提案値
"insertLink" 任意 提案されるリンクのURL
その他すべて 任意 null

dataTransfer は、 richtext やプレーンテキストデータのうち、DataTransfer オブジェクトに格納されるべき関連データを保持します。

inputType 編集ホスト dataTransfer
"insertFromPaste", "insertFromPasteAsQuotation", "insertFromDrop", "insertTranspose", "insertReplacementText" または "insertFromYank" contenteditable あらかじめデータが入ったDataTransfer オブジェクト。以下の条件を満たすこと:
  1. DataTransfer オブジェクトのdrag data store読み取り専用モードであること。[HTML]
  2. DataTransfer オブジェクトのdrag data store item listに、drag data item type string"text/html"のエントリーが1つあり、そのkindPlain Unicode stringで、データはクリップボードやキルバッファにある内容のHTML表現、または追加されるべき内容であること。[HTML]
  3. DataTransfer オブジェクトのdrag data store item listに、drag data item type string"text/plain"のエントリーが1つあり、そのkindPlain Unicode stringで、データは貼り付け、ドロップ、または追加されるべき内容のプレーンテキスト表現であること。[HTML]
その他すべて 任意 null

getTargetRanges() は、イベントがキャンセルされなければ影響を受けるStaticRangesの配列を返します。

5.1.3 メソッド

inputType 編集ホスト getTargetRanges() の応答
"historyUndo" または "historyRedo" 任意 空配列
その他すべて contenteditable イベントに関連付けられたStaticRanges [DOM] の配列
その他すべて input または textarea 空配列

getTargetRanges() は、inputType が "historyUndo" または "historyRedo" である場合や、編集ホストが contenteditable 要素でない場合は空配列を返します。それ以外の場合は配列を返します。

5.2 イベント定義

beforeinput
タイプ beforeinput
インターフェイス InputEvent
同期/非同期 同期
バブル はい
信頼できるターゲット contenteditable 属性が有効な任意の Element
既定の動作 [UI-EVENTS] inputType "insertCompositionText" の contentEditable=typing 編集ホストの場合は「DOMの更新」。 contentEditable="true" 編集ホストのすべての inputTypeの場合は「DOM要素の更新」。 それ以外はなし。
コンテキスト
(信頼できるイベント)
  • InputEvent.data: 要素に追加されたデータを含む文字列。該当しない場合は null となることがある。
  • InputEvent.dataTransfer: 要素に追加・削除されたリッチテキストデータ。該当しない場合は null となることがある。
  • InputEvent.getTargetRanges(): イベントがキャンセルされなければ、DOMに影響を与えるStaticRangesの配列を返す。

ユーザーエージェントは、ユーザーが contenteditable 要素に入力しようとした際に、必ずこのイベントを発行[UI-EVENTS]しなければなりません。 ただし、ユーザーエージェント [UI-EVENTS]が DOM を更新することを意味するわけではありません。

ユーザーエージェントは、ユーザー入力の試行によるものではないイベント(例えばシステムイベント)により、このイベントを発行[UI-EVENTS]してはなりません。

input
タイプ input
インターフェイス InputEvent
同期/非同期 同期
バブル はい
信頼できるターゲット contenteditable 属性が有効な任意の Element
既定の動作 [UI-EVENTS] なし
コンテキスト
(信頼できるイベント)
  • InputEvent.data: 要素に追加されたデータを含む文字列。該当しない場合は null となることがある。
  • InputEvent.dataTransfer: 要素に追加・削除されたリッチテキストデータ。該当しない場合は null となることがある。

ユーザーエージェント[UI-EVENTS]は、ブラウザーが文書内容の変更に対するユーザーの意図を処理した後、DOMが更新された直後に必ずこのイベントを発行[UI-EVENTS]しなければなりません。

6. プライバシーおよびセキュリティの考慮事項

このセクションは規範的ではありません。

この機能による既存イベント(keydownkeypress [UI-EVENTS] イベントなど)ですでに利用可能な フィンガープリント [fingerprinting-guidance] 技術を除き、既知のセキュリティやプライバシーへの影響はありません。

この機能が既存イベントを置き換える場合、ユーザーの意図が記録されるため、利用したハードウェアの種類ではなく フィンガープリント [fingerprinting-guidance] 技術の利用可能性が低下する可能性があります。 意図の表明方法が記録されるためです。

7. 謝辞

Michael Aufreiter、Adrian Bateman、Oliver Buchtala、Robin Berjon、Enrica Casucci、Bo Cupp、Domenic Denicola、Emil Eklund、Olivier Forget、Aryeh Gregor、Marijn Haverbeke、Yoshifumi Inoue、Koji Ishii、Gary Kacmarcik、Ian Kilpatrick、Frederico Caldeira Knabben、Takayoshi Kochi、Piotrek Koszuliński、Travis Leithead、Grisha Lyukshin、Miles Maxfield、Chaals McCathie Nevile、Masayuki Nakano、Ryosuke Niwa、Julie Parent、Ben Peters、Florian Rivoal、Morgan Smith、Hallvord R. M. Steen、Johan Sörlin、Cristian Talau、Dave Tapuska、Ojan Vafai、Léonie Watson、Xiaoqian Wu、Chong Zhang、Joanmarie、そしてEditing Taskforceの皆様に感謝します。

A. 参考文献

A.1 参考情報

[CSSOM]
CSSオブジェクトモデル (CSSOM). Daniel Glazman; Emilio Cobos Álvarez. W3C. 2021年8月26日. W3C 作業草案. URL: https://www.w3.org/TR/cssom-1/
[DOM]
DOM標準. Anne van Kesteren. WHATWG. 現行標準. URL: https://dom.spec.whatwg.org/
[fingerprinting-guidance]
Web仕様におけるブラウザフィンガープリント対策. Nick Doty. W3C. 2019年3月28日. W3C 作業グループノート. URL: https://www.w3.org/TR/fingerprinting-guidance/
[HTML]
HTML標準. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. 現行標準. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
インフラ標準. Anne van Kesteren; Domenic Denicola. WHATWG. 現行標準. URL: https://infra.spec.whatwg.org/
[INPUT-EVENTS]
Input Events レベル 1. Johannes Wilm; Ben Peters. W3C. 2019年5月30日. W3C 作業草案. URL: https://www.w3.org/TR/input-events-1/
[UAX29]
Unicode文字分割. Josh Hadley. Unicode Consortium. 2023年8月16日. Unicode Standard Annex #29. URL: https://www.unicode.org/reports/tr29/tr29-43.html
[UI-EVENTS]
UIイベント. Gary Kacmarcik; Travis Leithead. W3C. 2023年9月15日. W3C 作業草案. URL: https://www.w3.org/TR/uievents/
[WEBIDL]
Web IDL標準. Edgar Chen; Timothy Gu. WHATWG. 現行標準. URL: https://webidl.spec.whatwg.org/