17

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

私はこの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。

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

4

4 に答える 4

23

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

2012年6月23日更新

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

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

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

于 2011-10-18T09:17:03.897 に答える
2

これは少し遅いことは知っていますが、jQueryはフォーカスを持って機能しているようです。この例を確認してください。

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

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

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

于 2013-06-30T18:38:26.083 に答える
2

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

$("#test").blur(function(){
  $("#log").append("<li>Item lost focus</li>");
});
于 2013-07-26T17:15:55.520 に答える
1

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

于 2014-01-24T09:07:18.473 に答える