contenteditableでchange

スポンサーリンク

はじめに

HTMLの div タグ等に contenteditable 属性を付けると、その要素が編集可能になる。
参考リンク：君はHTML5の contentEditable 属性を知っているか

しかし、通常のテキストフィールドとは異なり、
キーボードでテキストの内容を変更しても、
onchnage イベントが発火してくれません。

そこで、javascript でキーボード操作、コピペ等の操作を関して、
テキストの内容が変わったら、onchnage イベントを発火する
サンプルコードを紹介したいと思います。

コード

下のコードを、load 時に走らせておきます。

$(function() {
  $("[contentEditable]").each(function () {
    var $this = $(this);
    var htmlOld = $this.html();
    $this.on('blur keyup paste copy cut mouseup', function() {
        var htmlNew = $this.html();
        if (htmlOld !== htmlNew) {
            $this.trigger('change');
            htmlOld = htmlNew;
        }
    })
  });
 });

あとは、普通のイベントと同じように、イベントの発火を検知して、
やりたい処理を行います。

  $("[contentEditable]").on("change", function() {
	console.log($(this).text());
  });