Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
本仕様は、テキストおよび関連する入力イベントへの追加を定義し、テキストエディターアプリケーションやテキスト入力・テキスト整形を扱う他のアプリケーションにおいて、ブラウザーのデフォルト動作を監視・操作できるようにします。この仕様は UI イベント仕様 [UI-EVENTS] を基盤としています。
このセクションは、本書が公開された時点での 文書のステータスを示します。現在の W3C 公開物と、この技術レポートの最新リビジョンは W3C 標準・草案一覧で確認できます。
「入力イベント レベル 2」は初版の「入力イベント」 [INPUT-EVENTS] を置き換え、以下を含みます。
Input Events仕様のテストスイートおよび実装レポートは現在も作業中です。
本書は Web編集作業グループにより 勧告トラックで作業草案として公開されました。
作業草案としての公開は W3Cおよびそのメンバーによる支持を意味するものではありません。
この文書はドラフトであり、随時更新・置換・廃止される可能性があります。他の文書の引用には適切ではありません。
本書は W3C 特許ポリシーの下で活動するグループによって作成されました。 W3Cは グループ成果物に関連する特許開示の公開リスト を管理しています。このページには特許開示の方法も記載されています。ある個人が「必須クレーム」を含むと考える特許について実際の知識がある場合、その情報は W3C特許ポリシー第6章に従って開示しなければなりません。
この文書は 2023年11月3日 W3Cプロセス文書に従います。
この文書は、UIイベント仕様 [UI-EVENTS] で説明されている input および beforeinput の2つのイベントに編集関連の追加を記述します。これらのイベントの目的は、著者が編集の前後でデフォルト編集動作を理解・上書きできるようにすることです。
非規範的と記載されたセクションだけでなく、本仕様書に含まれる著作ガイドライン・図・例・注記もすべて非規範的です。それ以外の記述はすべて規範的です。
本文書中の MAY、MUST、MUST NOT というキーワードは、BCP 14 [RFC2119] [RFC8174] に示される通り、ここで示すようにすべて大文字で記載されている場合のみ適用されます。
この定義は規範的ではありません。
キルバッファは、クリップボードとは別のリッチテキストコンテンツを格納するインメモリストアで、特定の削除コマンドによって削除された内容を一時的に保存するためのものです。ユーザーはキルバッファをヤンクする意図を示すことで、現在の選択範囲をキルバッファの内容で置換できます。このセクションは規範的ではありません。
ウェブベースのテキストエディターを作成するには、ブラウザーコードの上に多くのJavaScriptが必要になりますが、その理由は以下の通りです。
本仕様は、beforeinput イベントを通じてすべてのユーザー入力に関するブラウザーの処理を上書きできる方法と、input イベントを通じてユーザー入力によるDOMの変更を監視できる方法をウェブ開発者に提供し、こうした課題の解消を目指します。
このセクションは規範的ではありません。
入力イベントは、ユーザーがマークアップを編集しようとする前(beforeinputイベント)および後(inputイベント)に送信されます。これには、内容の挿入・削除や書式変更も含まれます。
入力イベントは、dispatchされる対象として、編集ホストとなる要素(contenteditable属性が設定された要素、
textarea
要素、ならびに
input
要素でテキスト入力を許可するもの)が含まれます。
WebIDLpartial interface InputEvent {
readonly attribute DataTransfer? dataTransfer
;
sequence<StaticRange> getTargetRanges
();
};
partial dictionary InputEventInit {
DataTransfer? dataTransfer
= null;
sequence<StaticRange> targetRanges
= [];
};
inputType
属性、dataTransfer
属性、および
targetRanges
属性は、InputEventInit
により、対応するInputEvent
オブジェクトの属性を初期化します。
このセクションは規範的ではありません。
次の表は、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 | 空配列 |
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 オブジェクトで、以下の条件を満たす:
|
その他すべて | 任意 | null |
getTargetRanges()
は、イベントがキャンセルされなかった場合に変更される内容を表すStaticRangesの配列を返します。編集ホストが
contenteditable ノードまたは
EditContext 編集ホストの場合に限ります。そうでなければ、このメソッドは何も返しません。返されるStaticRangesは、ブラウザーが通常置換するコードポイントのみを必ずカバーし、たとえそれが書記素クラスタの一部のみでもです。
inputType | 編集ホスト |
getTargetRanges() の応答
|
---|---|---|
"historyUndo" または "historyRedo"
|
任意 | 空配列 |
その他すべて |
contenteditable
|
イベントに関連付けられたStaticRanges [DOM]の配列 |
その他すべて |
input
または
textarea
|
空配列 |
"historyUndo"
または"historyRedo"
がinputTypeである場合や、編集ホストがcontenteditable要素でない場合は、空配列を返します。
beforeinput
タイプ |
beforeinput
|
---|---|
インターフェイス |
InputEvent
|
同期/非同期 | 同期 |
バブル | はい |
信頼できるターゲット |
編集ホストである任意のElement
|
既定の動作 [UI-EVENTS] |
|
コンテキスト (信頼できるイベント) |
|
ユーザーエージェントは、ユーザーがcontenteditable要素に入力しようとした際に必ずこのイベントをdispatchしなければなりません。これはユーザーエージェントが必ずDOMを更新することを意味しません。
ユーザーエージェントは、ユーザー入力の試行によるものではないイベント(例えばシステムイベント)によって、このイベントをdispatchしてはなりません。
input
タイプ |
input
|
---|---|
インターフェイス |
InputEvent
|
同期/非同期 | 同期 |
バブル | はい |
信頼できるターゲット |
contenteditable 属性が有効な任意のElement
|
既定の動作 [UI-EVENTS] | なし |
コンテキスト (信頼できるイベント) |
|
ユーザーエージェントは、ユーザーの意図による文書内容の変更をブラウザーが処理してDOMが更新された直後に必ずこのイベントをdispatchしなければなりません。編集ホストが EditContext編集ホスト(自動DOM変更を行わない)である場合や、ユーザーエージェントがDOM変更不要と判断した場合には、このイベントをdispatchしてはなりません。
構成の開始は、compositionstartイベントのdispatchによって示されます。
構成セッション中、テキスト構成システムがアクティブなテキスト部分を更新するたびに、compositionupdateイベントがdispatchされます。
各compositionupdateイベントの後に、beforeinput
イベントとinput
イベントのペアがdispatchされます。
beforeinput
およびinput
イベントは:
inputType
が"insertCompositionText"
に設定されている
data
属性はcompositionupdateイベントのそれと等しい
targetRange
は構成のアクティブなテキスト部分を囲む
アクティブなテキスト部分のDOM内容は、beforeinput
イベントのdispatch後、input
イベントのdispatch前に更新されます。
構成セッションの終了は、compositionendイベントのdispatchによって示されます。
"insertFromPaste"
のbeforeinput
イベントがdispatchされる場合、必ずその前にpaste
[CLIPBOARD-APIS]イベントがdispatchされなければなりません。
このセクションは規範的ではありません。
この機能による既存イベント(keydown
やkeypress
[UI-EVENTS]イベントなど)ですでに利用可能なフィンガープリント
[fingerprinting-guidance]技術を除き、既知のセキュリティやプライバシーへの影響はありません。
この機能が既存イベントを置き換える場合、ユーザーの意図が記録されるため、利用したハードウェアの種類ではなくフィンガープリント [fingerprinting-guidance]技術の利用可能性が低下する可能性があります。 意図の表明方法が記録されるためです。
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の皆様に感謝します。
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in: