---
title: compositionstart
slug: Web/Events/compositionstart
tags:
  - DOM
  - Event
  - Gecko DOM Reference
  - events
  - 要更新
translation_of: Web/API/Element/compositionstart_event
translation_of_original: DOM/DOM_event_reference/compositionstart
---
<p>DOM <code>compositionstart</code> イベントはユーザがIMEで未確定文字列の入力を開始した時のように、間接的なテキスト入力を開始した時に同期的に発生します。このイベントは {{ domxref("CompositionEvent") }} インターフェースを持ちます。</p>
<div class="note">
  <strong>注釈:</strong> このイベントはテキストが編集が始まる前に発生すべきではあるのですが、Gecko では編集を始めた直後に発生します。</div>
<ul style="display: table; padding: 0; border-left: 2px solid; margin-left: 0.5em;">
  <li style="display: table-row; padding: 3px; margin: 0;"><dfn>インターフェース:</dfn>{{ domxref('CompositionEvent') }}</li>
  <li style="display: table-row; padding: 3px; margin: 0;"><dfn>同期・非同期 :</dfn>同期</li>
  <li style="display: table-row; padding: 3px; margin: 0;"><dfn>バブルフェーズ :</dfn>有り</li>
  <li style="display: table-row; padding: 3px; margin: 0;"><dfn>ターゲット :</dfn> {{ domxref('Element') }}</li>
  <li style="display: table-row; padding: 3px; margin: 0;"><dfn>キャンセル :</dfn> 可能 (ただし、下記のブラウザ固有の事情を参照)</li>
  <li style="display: table-row; padding: 3px; margin: 0;"><dfn>既定動作 :</dfn> 無し</li>
</ul>
<h2 id="仕様書">仕様書</h2>
<p><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart">DOM Level3 Events</a></p>
<h2 id="ブラウザ間の互換性">ブラウザ間の互換性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本的なサポート</td>
        <td>
          <p>{{ CompatVersionUnknown() }}</p>
          <p>data 属性値は仕様と違っています。</p>
        </td>
        <td>{{ CompatGeckoDesktop("9.0") }}</td>
        <td>
          <p>{{ CompatVersionUnknown() }}</p>
          <p>data 属性値は常に空です。</p>
        </td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本的なサポート</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("9.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_の動作メモ">Gecko の動作メモ</h3>
<p>DOM Level 3 仕様書では <code>compositionstart</code> はキャンセル可能と定義されています。しかし、 Gecko では現在のところ、キャンセルをできないようにしています。</p>
<p>Gecko はこのイベントをIMEが編集を開始した時に発生させます。また、プラットフォームによっては開始された編集を取り消すAPIがありません。さらに、Gecko は IME が実際に編集を開始するまで各キーイベントがそのきっかけとなるかどうか知ることができません。これらの理由から、<code>compositionstart</code> イベントの {{ domxref("event.preventDefault()") }} は Gecko では機能しません。</p>