From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/element/compositionupdate_event/index.html | 149 +++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/ja/web/api/element/compositionupdate_event/index.html (limited to 'files/ja/web/api/element/compositionupdate_event') diff --git a/files/ja/web/api/element/compositionupdate_event/index.html b/files/ja/web/api/element/compositionupdate_event/index.html new file mode 100644 index 0000000000..f806699c0e --- /dev/null +++ b/files/ja/web/api/element/compositionupdate_event/index.html @@ -0,0 +1,149 @@ +--- +title: 'Element: compositionupdate イベント' +slug: Web/API/Element/compositionupdate_event +tags: + - Element + - Event + - Input method + - Reference + - compositionupdate +translation_of: Web/API/Element/compositionupdate_event +--- +
{{APIRef}}
+ +

compositionupdate イベントは、 {{glossary("input method editor", "IME")}} などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。

+ +

例えば、このイベントは、ユーザーがピン音 IME を使用して漢字の入力をしている最中に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("CompositionEvent")}}
イベントハンドラープロパティなし
+ +

例

+ +
const inputElement = document.querySelector('input[type="text"]');
+
+inputElement.addEventListener('compositionupdate', (event) => {
+  console.log(`generated characters were: ${event.data}`);
+});
+ +

実行例

+ +

HTML

+ +
<div class="control">
+  <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label>
+  <input type="text" id="example" name="example">
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
+  <button class="clear-log">Clear</button>
+</div>
+ + + +

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 = log.textContent + `${event.type}: ${event.data}\n`;
+}
+
+inputElement.addEventListener('compositionstart', handleEvent);
+inputElement.addEventListener('compositionupdate', handleEvent);
+inputElement.addEventListener('compositionend', handleEvent);
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '180px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-compositionupdate')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.compositionupdate_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf