このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Element: compositionstart イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
compositionstart イベントは、 IME などのテキスト変換システムが新しい変換セッションを開始した時に発生します。
例えば、このイベントはユーザーがピン音 IME を使用して漢字の入力を開始した後に発生します。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("compositionstart", (event) => {});
oncompositionstart = (event) => {};
イベント型
CompositionEvent です。 Event を継承しています。
イベントプロパティ
親である UIEvent および Event から継承したプロパティもあります。
CompositionEvent.data読取専用-
イベントを発生させたインプットメソッドによって生成された文字を返します。これは
CompositionEventオブジェクトを生成したイベントの種類によって異なります。 CompositionEvent.locale読取専用-
現在の入力メソッドのロケール(例えば、変換が IME に関連付けられている場合はキーボードレイアウトのロケール)を返します。
例
js
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener("compositionstart", (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);
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| UI Events # event-type-compositionstart |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
- 関連イベント:
compositionend,compositionupdate。