web-dev-qa-db-ja.com

コンテンツ編集可能なHTML要素のイベントをリッスンする

focus属性を持つHTML要素のchangeやcontenteditableのようなイベントをリッスンする方法があるかどうかを調べようとしています。

私はこのhtmlマークアップを持っています：

<p id="test" contenteditable >Hello World</p>

私は成功せずにこれらを試しました（ JSBin ）：

var test = document.querySelector('#test');
test.addEventListener('change', function(){
  alert('content edited');
}, false);
test.addEventListener('DOMCharacterDataModified', function(){
  alert('content edited');
}, false);
test.addEventListener('focus', function(){
  alert('content edited');
}, false);

キーボードやマウスのイベントを聞きたくありません。 W3C および [に明確なドキュメントが見つかりませんでした〜＃〜] mdn [〜＃〜] 約contenteditable。

コンテンツ編集可能なHTML要素でchangeおよびfocusまたはその他のイベントをリッスンすることは可能ですか？

javascripthtmldommutation-events
15
Mohsen

あんまり。 change要素のcontenteditableイベントはなく、HTML5 inputイベントもありませんが、最終的には表示されると思います。それは苦痛です。

更新2012年6月23日

最近のWebKitは、Firefox 14と同様に、input要素でHTML5contenteditableイベントをサポートしています。

ただし、focusは、ほとんどのブラウザのDOMCharacterDataModifiedと同様に機能します（ただし、特にIE <9）ではありません）。 http：// jsfiddle.net/UuYQH/112/

ちなみに、contenteditableはブール属性ではありません。値が必要です。値は、「true」、「false」、「inherit」、および空の文字列（「true」に相当）のいずれかである必要があります。 。

23
Tim Down

私はこれが少し遅いことを知っていますが、jQueryはフォーカスを持って動作しているようです、この例をチェックしてください：

http://jsfiddle.net/powerphillg5/EGtSC/

$("#test").focus(function(){
     $("#log").append("<li>Item Focused</li>");
});

これがお役に立てば幸いですが、それがあなたが探していたものでない場合、私は謙虚に投票を受け入れます。

2
Philll_t

ぼかし（領域がフォーカスを失ったとき）とフォーカスの両方が機能します。少なくともjQueryでは。 Chrome 28およびSafari6でテスト済み。

$("#test").blur(function(){
  $("#log").append("<li>Item lost focus</li>");
});
1
pussmun

contenteditableはIE 5.5で導入され、JavaScript 1.1/1.2 APIでサポートされ、最初にiframeに適用され、後でDIVに適用されました。すべてのブラウザである程度サポートされています。 HTML5仕様のほとんどの要素はこの属性を受け入れることができます（ただし、下位互換性に注意してください）。onchangeイベントのサポートは、元々設計されたとおりにフォーム要素に適用される場合があり、この属性とはほとんど関係ありません。オプションは、引き続きキープレスイベントであり、キャプチャが簡単です。ターゲット要素のフォーカスのチェックと組み合わせると、onchangeと同様の結果が得られます。エッジの場合には理想的ではないかもしれませんが、ほとんどの使用例では、このルートを使用し、最も下位互換性もあります。

1
user3231324