InputEvent: inputType プロパティ
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
inputType は InputEvent インターフェイスの読み取り専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。
値
入力された入力種別を含む文字列です。insertText、deleteContentBackward、insertFromPaste、formatBold など、多くの値を取り得ます。利用可能な入力種別の完全なリストは、Input Events Level 2 仕様の Attributes の章を参照してください。
例
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 も参照してください。
仕様書
| 仕様書 |
|---|
| UI Events # dom-inputevent-inputtype |