More than 3 years have passed since last update.

contenteditableな要素への入力をイベントで検知する

Last updated at 2020-02-11Posted at 2020-02-10

結論

changeイベントは発火しないけど、inputイベントは発火しています。

以下のような要素があったとします。

<div id="editor" contenteditable="true"></div>

これに対する入力がなされたタイミングで処理したい場合があります。
そこで、changeイベントで取れるかな？と思って以下のように書きたくなると思います。

//ダメな例

let editor = document.getElementById("editor");
editor.addEventListener("change",function(){
   console.log("change");
});

しかし、入力してもchangeイベントは発火しません。
contenteditableは、次のようにinputイベントで受け取りましょう。

//よい例

let editor = document.getElementById("editor");
editor.addEventListener("input",function(){
   console.log("input");
});