1. ホーム
  2. javascript

[解決済み] contenteditableを使用したonChangeイベント [重複]。

2022-02-18 06:13:41

質問

のようなコード。

...text <span contenteditable="true" onChange="someFunction()">blah blah</span> text...

onChangeイベントが動作しない。(少なくとも FireFox では)
textarea/inputタグは使いたくありません。なぜなら、テキスト中の特定の単語だけを変更でき、インラインで表示されなければならないからです(ブロックではありません)。

そのような方法はありますか?

どのように解決するのですか?

私が書いた関数です。
この関数を1回呼び出すと、ページ内のすべてのContentEditable要素が修正されます。

function fix_onChange_editable_elements()
{
  var tags = document.querySelectorAll('[contenteditable=true][onChange]');//(requires FF 3.1+, Safari 3.1+, IE8+)
  for (var i=tags.length-1; i>=0; i--) if (typeof(tags[i].onblur)!='function')
  {
    tags[i].onfocus = function()
    {
      this.data_orig=this.innerHTML;
    };
    tags[i].onblur = function()
    {
      if (this.innerHTML != this.data_orig)
        this.onchange();
      delete this.data_orig;
    };
  }
}