InputEvent: inputType プロパティ

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

inputTypeInputEvent インターフェイスの読み取り専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。

入力された入力種別を含む文字列です。insertTextdeleteContentBackwardinsertFromPasteformatBold など、多くの値を取り得ます。利用可能な入力種別の完全なリストは、Input Events Level 2 仕様の Attributes の章を参照してください。

この例は編集可能な <div>入力イベントinputType をログ出力します。

HTML

html
<p id="log">入力種別:</p>
<div
  contenteditable="true"
  style="margin: 20px;padding: 20px;border:2px dashed red;">
  <p>
    いくつかのサンプルテキストです。改行を入れたり、異なる形でテキストを削除したり、異なるコンテンツを貼り付けたりしてみてください。
  </p>
  <hr />
  <ul>
    <li>サンプルの</li>
    <li>箇条書き</li>
    <li>リスト</li>
  </ul>
  <p>他の段落</p>
</div>

JavaScript

js
const log = document.getElementById("log");
const editable = document.querySelector("div[contenteditable]");
editable.addEventListener("input", logInputType);

function logInputType(event) {
  log.textContent = `入力種別: ${event.inputType}`;
}

結果

<div> 内のテキストを編集して、どうなるかを試してみてください。

メモ: もっと詳細な例として Masayuki Nakano's InputEvent test suite も参照してください。

仕様書

Specification
UI Events
# dom-inputevent-inputtype

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inputType
insertFromPasteAsQuotation input type
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.