JavaScript, jQuery, HTMLでcontenteditable changeイベントを理解する

2024-04-02

JavaScript、jQuery、HTMLにおけるcontenteditable changeイベント

contenteditable属性を持つ要素は、ユーザーが直接編集できる要素です。この要素の内容が変更されたときに、イベントが発生します。このイベントをcontenteditable changeイベントと呼びます。

このイベントを利用することで、ユーザーが編集した内容をリアルタイムで取得したり、編集内容に応じて処理を行うことができます。

イベントの種類

contenteditable changeイベントには、主に以下の種類があります。

inputイベント: ユーザーが入力した内容が変更されたときに発生します。
changeイベント: 要素の内容が変更されたときに発生します。
keydownイベント: キーが押されたときに発生します。

イベントの取得方法

JavaScript

const element = document.querySelector('[contenteditable]');

element.addEventListener('input', (event) => {
  // 編集内容を取得
  const content = event.target.innerHTML;

  // 編集内容に応じて処理を行う
  console.log(content);
});

jQuery

$(document).ready(() => {
  $('[contenteditable]').on('input', (event) => {
    // 編集内容を取得
    const content = $(event.target).html();

    // 編集内容に応じて処理を行う
    console.log(content);
  });
});

HTML

<div contenteditable="true" oninput="handleInput(event)">
  </div>

注意点

changeイベントは、要素の内容が完全に変更されたときに発生します。そのため、ユーザーが文字を入力するたびに発生するわけではありません。
inputイベントは、ユーザーが入力した内容が変更されるたびに発生します。そのため、ユーザーが文字を削除したり、カーソルを移動したりするたびに発生します。
keydownイベントとkeyupイベントは、キーが押されたときと離されたときに発生します。これらのイベントを利用することで、ユーザーが入力した内容をリアルタイムで取得することができます。

const element = document.querySelector('[contenteditable]');

element.addEventListener('input', (event) => {
  // 編集内容を取得
  const content = event.target.innerHTML;

  // 編集内容に応じて処理を行う
  console.log(content);
});

このコードは、contenteditable属性を持つ要素の内容が変更されたときに、inputイベントが発生し、編集内容を出力します。

$(document).ready(() => {
  $('[contenteditable]').on('input', (event) => {
    // 編集内容を取得
    const content = $(event.target).html();

    // 編集内容に応じて処理を行う
    console.log(content);
  });
});

<div contenteditable="true" oninput="handleInput(event)">
  </div>

handleInput()関数

function handleInput(event) {
  // 編集内容を取得
  const content = event.target.innerHTML;

  // 編集内容に応じて処理を行う
  console.log(content);
}

このコードは、handleInput()関数は、編集内容を取得し、コンソールに出力します。

応用例

ユーザーが入力した内容をリアルタイムで保存する
ユーザーが入力した内容に応じて、他の要素を更新する

contenteditable changeイベントを取得する他の方法

MutationObserverは、DOMツリーの変更を監視するAPIです。このAPIを利用することで、contenteditable属性を持つ要素の内容が変更されたことを検知することができます。

const element = document.querySelector('[contenteditable]');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'characterData') {
      // 編集内容を取得
      const content = element.innerHTML;

      // 編集内容に応じて処理を行う
      console.log(content);
    }
  });
});

observer.observe(element, {
  characterData: true,
});

このコードは、MutationObserverを利用して、contenteditable属性を持つ要素の内容が変更されたことを検知し、編集内容を出力します。

メリット

すべてのブラウザで動作する
高いパフォーマンスで動作する

コードが複雑になる

const element = document.querySelector('[contenteditable]');

element.addEventListener('input', (event) => {
  // 編集内容を取得
  const content = event.target.innerHTML;

  // 独自イベントを発生させる
  const customEvent = new CustomEvent('contentChanged', {
    detail: {
      content,
    },
  });

  element.dispatchEvent(customEvent);
});

document.addEventListener('contentChanged', (event) => {
  // 編集内容を取得
  const content = event.detail.content;

  // 編集内容に応じて処理を行う
  console.log(content);
});