このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Element: compositionupdate イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
compositionupdate イベントは、 IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。
例えば、このイベントは、ユーザーがピン音 IME を使用して漢字の入力をしている最中に発生します。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("compositionupdate", (event) => {});
oncompositionupdate = (event) => {};
イベント型
CompositionEvent です。 Event を継承しています。
イベントプロパティ
親である UIEvent および Event から継承したプロパティもあります。
CompositionEvent.data読取専用-
イベントを発生させたインプットメソッドによって生成された文字を返します。これは
CompositionEventオブジェクトを生成したイベントの種類によって異なります。 CompositionEvent.locale読取専用 非推奨;-
現在の入力メソッドのロケール(例えば、変換が IME に関連付けられている場合はキーボードレイアウトのロケール)を返します。
例
js
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener("compositionupdate", (event) => {
console.log(`generated characters were: ${event.data}`);
});
実行例
HTML
html
<div class="control">
<label for="example">
最初にテキストボックスを選択して、IME を開いてください。
<ul>
<li>macOS では <kbd>option</kbd> + <kbd>`</kbd></li>
<li>Windows では <kbd>windows</kbd> + <kbd>.</kbd></li>
</ul>
</label>
<input type="text" id="example" name="example" />
</div>
<div class="event-log">
<label for="eventLog">イベントログ:</label>
<textarea
readonly
class="event-log-contents"
rows="8"
cols="25"
id="eventLog"></textarea>
<button class="clear-log">Clear</button>
</div>
body {
padding: 0.2rem;
display: grid;
grid-template-areas: "control log";
}
.control {
grid-area: control;
}
.event-log {
grid-area: log;
}
.event-log-contents {
resize: none;
}
label,
button {
display: block;
}
input[type="text"] {
margin: 0.5rem 0;
}
kbd {
border-radius: 3px;
padding: 1px 2px 0;
border: 1px solid black;
}
JavaScript
js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");
clearLog.addEventListener("click", () => {
log.textContent = "";
});
function handleEvent(event) {
log.textContent += `${event.type}: ${event.data}\n`;
}
inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);
結果
[フレーム]
仕様書
| Specification |
|---|
| UI Events # event-type-compositionupdate |
ブラウザーの互換性
Enable JavaScript to view this browser compatibility table.
関連情報
- 関連イベント:
compositionstart,compositionend。