8

Chrome と Safari (および場合によっては他の Webkit ベースのブラウザー) では、div がフォーカスを失った後でも、contenteditable div に入力することができます。

この問題を説明するために、簡単な例を作成しました: http://jsfiddle.net/yfcsU/3/

この例には 2 つの要素があります。1 つの div とcontenteditable="true"、クリックされたときに contenteditable div でぼかしイベントをトリガーするリンクです。

リンクをクリックすると、contenteditable div はフォーカスを失いますが、引き続き div に入力することはでき、キーを押すと再度フォーカスされます。

この動作は、期待どおりに動作する Firefox では異なります。リンクをクリックすると、contenteditable div が入力の受け入れを停止します。

Webkit では、div で contenteditable を無効にせずにフォーカスを失った後、contenteditable div が入力の受け入れを強制的に停止する方法はありますか?

4

2 に答える 2

10

正しいとマークされた回答は実際には正しいですが、もう少し簡単な別の解決策を追加します。contentEditable div で blur() を呼び出した後、これを呼び出す必要があります。

window.getSelection().removeAllRanges();

ここでテストしてください: http://jsfiddle.net/mareksuscak/oytdoxy8/

それは同じ仕事をしているように見え、それが正しく機能しない理由も説明しています-通常、選択範囲はぼやけているときに入力要素から削除されますが、何らかの形で contentEditable div に対して実行されないため、文字/libe ブレークを入力した後は再び集中。

于 2014-11-12T15:01:48.653 に答える
8

しばらくこれに苦労した後、私は常にcontenteditable要素にWebkitでの入力の受け入れを停止させる方法を見つけていました。

解決策は、一時的に編集可能な要素を作成し、それをDOMに追加し、フォーカスを合わせてから削除することです。これにより、ページ上の他のcontenteditable要素が非アクティブ化されます。

これに相当するjQueryコードは次のようになります。

$('<div contenteditable="true"></div>').appendTo('body').focus().remove()

この手法のデモを含めるように元の例を更新しました：http：//jsfiddle.net/yfcsU/4/

于 2012-09-12T07:47:37.373 に答える