入力イベント レベル 2

W3C 作業草案

この文書の詳細
このバージョン:
https://www.w3.org/TR/2025/WD-input-events-2-20250814/
最新公開バージョン:
https://www.w3.org/TR/input-events-2/
最新エディタ草案:
https://w3c.github.io/input-events/
履歴:
https://www.w3.org/standards/history/input-events-2/
コミット履歴
編集者:
(招待専門家)
元編集者:
Ben Peters (Microsoft) - 2015年2月23日まで
フィードバック:
GitHub w3c/input-events (プルリクエスト, 新しい課題, オープン課題)
public-editing-tf@w3.org 件名 [input-events-2] … メッセージトピック … (アーカイブ)
レベルごとの最新公開バージョン
レベル2
レベルごとの最新エディタ草案
レベル2

概要

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

この文書のステータス

このセクションは、本書が公開された時点での 文書のステータスを示します。現在の W3C 公開物と、この技術レポートの最新リビジョンは W3C 標準・草案一覧で確認できます。

「入力イベント レベル 2」は初版の「入力イベント」 [INPUT-EVENTS] を置き換え、以下を含みます。

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

本書は Web編集作業グループにより 勧告トラックで作業草案として公開されました。

作業草案としての公開は W3Cおよびそのメンバーによる支持を意味するものではありません。

この文書はドラフトであり、随時更新・置換・廃止される可能性があります。他の文書の引用には適切ではありません。

本書は W3C 特許ポリシーの下で活動するグループによって作成されました。 W3Cグループ成果物に関連する特許開示の公開リスト を管理しています。このページには特許開示の方法も記載されています。ある個人が「必須クレーム」を含むと考える特許について実際の知識がある場合、その情報は W3C特許ポリシー第6章に従って開示しなければなりません。

この文書は 2023年11月3日 W3Cプロセス文書に従います。

1. はじめに

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

2. 適合性

非規範的と記載されたセクションだけでなく、本仕様書に含まれる著作ガイドライン・図・例・注記もすべて非規範的です。それ以外の記述はすべて規範的です。

本文書中の MAYMUSTMUST NOT というキーワードは、BCP 14 [RFC2119] [RFC8174] に示される通り、ここで示すようにすべて大文字で記載されている場合のみ適用されます。

3. 定義

意図の表明
ユーザーは、キーボード・IME・音声入力などの手段を使って、特定の編集操作を実行する意図を表明できます。具体的な入力操作は、プラットフォームごとの慣習に従って意図にマッピングされます。
キルバッファ

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

キルバッファは、クリップボードとは別のリッチテキストコンテンツを格納するインメモリストアで、特定の削除コマンドによって削除された内容を一時的に保存するためのものです。ユーザーはキルバッファをヤンクする意図を示すことで、現在の選択範囲をキルバッファの内容で置換できます。

4. 解決される課題

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

ウェブベースのテキストエディターを作成するには、ブラウザーコードの上に多くのJavaScriptが必要になりますが、その理由は以下の通りです。

  1. ブラウザーごとに編集操作の扱いが異なるため。
  2. 一部の編集操作に対するブラウザーの挙動にバグが多いため。
  3. 各サイトごとに編集操作の扱いに独自の好みがあるため。
  4. ブラウザーの高機能テキスト編集機能の開発は、Extensible Web Manifestoの原則に従っていない場合があり、ウェブ開発者コミュニティのニーズと連携していないことがあるため。

本仕様は、beforeinput イベントを通じてすべてのユーザー入力に関するブラウザーの処理を上書きできる方法と、input イベントを通じてユーザー入力によるDOMの変更を監視できる方法をウェブ開発者に提供し、こうした課題の解消を目指します。

5. ユースケース

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

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

6. 入力イベントタイプ

入力イベントは、ユーザーがマークアップを編集しようとする前(beforeinputイベント)および後(inputイベント)に送信されます。これには、内容の挿入・削除や書式変更も含まれます。

入力イベントは、dispatchされる対象として、編集ホストとなる要素(contenteditable属性が設定された要素、 textarea 要素、ならびに input 要素でテキスト入力を許可するもの)が含まれます。

6.1 InputEvent インターフェイス

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

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

inputType属性、dataTransfer属性、および targetRanges属性は、InputEventInit により、対応するInputEventオブジェクトの属性を初期化します。

6.1.1 概要

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

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

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

6.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" 現在のIME構成文字列の置換 はい いいえ 任意
"insertLink" リンクの挿入 いいえ はい 任意
"deleteWordBackward" キャレット直前の単語の削除 いいえ はい 折りたたみ
"deleteWordForward" キャレット直後の単語の削除 いいえ はい 折りたたみ
"deleteSoftLineBackward" キャレットから直前の表示行区切りまでの削除 いいえ はい 折りたたみ
"deleteSoftLineForward" キャレットから直後の表示行区切りまでの削除 いいえ はい 折りたたみ
"deleteEntireSoftLine" キャレット前後の表示行区切り間の削除 いいえ はい 折りたたみ
"deleteHardLineBackward" キャレットから直前のブロック要素またはbr要素までの削除 いいえ はい 折りたたみ
"deleteHardLineForward" キャレットから直後のブロック要素またはbr要素までの削除 いいえ はい 折りたたみ
"deleteByDrag" ドラッグ操作によるDOMからの内容の削除 いいえ はい 任意
"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イベントを必ずdispatchしなければなりません。
選択範囲が折りたたまれている場合、"deleteContentBackward"は、ユーザーがテキストノード内でテキスト削除を求めた場合と、キャレットがテキストノードの先頭にある場合により複雑な要素の削除や段落結合の意図を示した場合の両方で使用されます。
選択範囲が折りたたまれている場合、"deleteContentForward"は、ユーザーがテキストノード内でテキスト削除を求めた場合と、キャレットがテキストノードの末尾にある場合により複雑な要素の削除や段落結合の意図を示した場合の両方で使用されます。

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

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

dataTransfer は、DataTransferオブジェクトに、リッチテキストおよびプレーンテキストデータを文書から取得もしくは追加する情報を保持します(該当データがある場合)。

inputType 編集ホスト dataTransfer
"insertFromPaste", "insertFromPasteAsQuotation", "insertFromDrop", "insertTranspose", "insertReplacementText" または "insertFromYank" contenteditable 事前にセットされたDataTransferオブジェクトで、以下の条件を満たす:
  1. DataTransferオブジェクトのdrag data storeread-onlyモードである。[HTML]
  2. 貼り付け内容がファイルの場合、DataTransferオブジェクトのdrag data store item listには、ファイルのdrag data item type string(MIMEタイプ)が1件含まれ、そのkindFileで、データは貼り付けファイルに対応するFile オブジェクトである。[HTML]
  3. DataTransferオブジェクトのdrag data store item listには、drag data item type string"text/html"が1件含まれ、そのkindPlain Unicode stringで、データはクリップボードまたはキルバッファにある内容のHTML表現、もしくは追加される内容である。[HTML]
  4. DataTransferオブジェクトのdrag data store item listには、drag data item type string"text/plain"が1件含まれ、そのkindPlain Unicode stringで、データは貼り付け・ドロップ・追加される内容のプレーンテキスト表現である。[HTML]
  5. 貼り付け内容がリンクの場合、DataTransferオブジェクトのdrag data store item listには、drag data item type string"text/uri-list"が1件含まれ、そのkindPlain Unicode stringで、データはドロップまたは追加されるリンクのプレーンテキスト表現である。[HTML]
その他すべて 任意 null

getTargetRanges()は、イベントがキャンセルされなかった場合に変更される内容を表すStaticRangesの配列を返します。編集ホストが contenteditable ノードまたは EditContext 編集ホストの場合に限ります。そうでなければ、このメソッドは何も返しません。返されるStaticRangesは、ブラウザーが通常置換するコードポイントのみを必ずカバーし、たとえそれが書記素クラスタの一部のみでもです。

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

スクリプトやプラットフォームによっては、折りたたみ選択状態のテキストノードで前方・後方削除を行うと、1つまたは複数のコードポイントや、全体の書記素クラスタが削除される場合があります。例えば、「café」を含むテキストノードで後方削除を行うと、スクリプトやプラットフォームによって、アキュートアクセントのみが削除される場合や「é」全体が削除される場合があります。

6.1.3 メソッド

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

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

6.2 イベント定義

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

ユーザーエージェントは、ユーザーがcontenteditable要素に入力しようとした際に必ずこのイベントをdispatchしなければなりません。これはユーザーエージェントが必ずDOMを更新することを意味しません。

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

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

ユーザーエージェントは、ユーザーの意図による文書内容の変更をブラウザーが処理してDOMが更新された直後に必ずこのイベントをdispatchしなければなりません。編集ホストが EditContext編集ホスト(自動DOM変更を行わない)である場合や、ユーザーエージェントがDOM変更不要と判断した場合には、このイベントをdispatchしてはなりません。

7. IME構成中の入力イベント順序

構成の開始は、compositionstartイベントのdispatchによって示されます。

構成セッション中、テキスト構成システムがアクティブなテキスト部分を更新するたびに、compositionupdateイベントがdispatchされます。

compositionupdateイベントの後に、beforeinputイベントとinputイベントのペアがdispatchされます。 beforeinputおよびinputイベントは:

アクティブなテキスト部分のDOM内容は、beforeinputイベントのdispatch後、inputイベントのdispatch前に更新されます。

構成セッションの終了は、compositionendイベントのdispatchによって示されます。

8. "insertFromPaste"利用時のイベント順序

"insertFromPaste"beforeinputイベントがdispatchされる場合、必ずその前にpaste [CLIPBOARD-APIS]イベントがdispatchされなければなりません。

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

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

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

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

10. 謝辞

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 規範となる参考文献

[CLIPBOARD-APIS]
クリップボードAPIとイベント. Gary Kacmarcik; Anupam Snigdha. W3C. 2025年5月16日. W3C作業草案. URL: https://www.w3.org/TR/clipboard-apis/
[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/
[FileAPI]
ファイルAPI. Marijn Kruisselbrink. W3C. 2024年12月4日. W3C作業草案. URL: https://www.w3.org/TR/FileAPI/
[fingerprinting-guidance]
Web仕様におけるブラウザフィンガープリント対策. Nick Doty; Tom Ritter. W3C. 2025年8月4日. W3C作業グループノート. URL: https://www.w3.org/TR/fingerprinting-guidance/
[HTML]
HTML現行標準. Anne van Kesteren; Domenic Denicola; Dominic Farolino; 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/
[mimesniff]
MIME Sniffing現行標準. Gordon P. Hemsley. WHATWG. 現行標準. URL: https://mimesniff.spec.whatwg.org/
[RFC2119]
RFCで要件レベルを示すためのキーワード. S. Bradner. IETF. 1997年3月. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
RFC2119キーワードの大文字・小文字の曖昧性. B. Leiba. IETF. 2017年5月. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc8174
[UI-EVENTS]
UIイベント. Gary Kacmarcik; Travis Leithead. W3C. 2024年9月7日. W3C作業草案. URL: https://www.w3.org/TR/uievents/
[WEBIDL]
Web IDL現行標準. Edgar Chen; Timothy Gu. WHATWG. 現行標準. URL: https://webidl.spec.whatwg.org/

A.2 参考情報

[i18n-glossary]
国際化用語集. Richard Ishida; Addison Phillips. W3C. 2024年10月17日. W3C作業グループノート. URL: https://www.w3.org/TR/i18n-glossary/
[INPUT-EVENTS]
入力イベント レベル 1. Johannes Wilm. W3C. 2023年9月28日. W3C作業草案. URL: https://www.w3.org/TR/input-events-1/