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

Question

contenteditable属性のHTML要素のfocusまたはchangeのようなイベントを聴く方法があるかどうかを判断しようとしています。私は、任意の成功（JSBin）せずに、これらを試してみた

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

：：私は、キーボードやマウスのイベントに耳を傾ける必要はありません

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); 

私はこのHTMLマークアップを持っています。 W3CとMDNについては、明確な文書が見つかりませんでした。contenteditableです。

changeとfocusや他のイベントをコンテンツ編集可能なHTML要素で聞くことはできますか？

Answer 1

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

---

UPDATE 2012年6月23日

DOMCharacterDataModifiedがするようにFirefoxの14

---

focusが、しかし、仕事をしないよう最新のWebKitは、contenteditable要素にHTML5 inputイベントをサポートしていますほとんどのブラウザでは（IEは特にないが< 9）。 http://jsfiddle.net/UuYQH/112/

ちなみに、contenteditableは、 "true"、 "false"、 "inherit"および空の文字列（これは "true" ）。

Answer 2

この例をチェックアウト、私はこれはちょっと遅れている知っているが、jQueryの焦点で動作するようです：

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

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

を、私はこのことができます願っていますが、そうでない場合は、あなたが私を探していたものを謙虚に投票を受け入れるだろう。

Answer 3

ぼかし（フォーカスが失われたとき）と両方の作業に焦点を合わせます。少なくともjQueryの場合。 contentEditableが帰りIE 5.5で導入された

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

Answer 4

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