0

contenteditable DIV内で人気のあるRangyライブラリを使用しています。私のコードはとてもシンプルです:

var saved_selection = false;

$('#contenteditable').bind('keypress mouseup', function(e){
  $(this).find('.rangySelectionBoundary').remove();
  saved_selection = rangy.saveSelection();
});​

現在、これは Chrome と FF でかなりうまく機能します。ただし、Opera では、contenteditable に文字を挿入することができず、むしろフォーカスが失われるか、少なくともそのように見えるため、非常に奇妙な動作をします。

テスト用に jsFiddle を用意しました。Opera では、編集可能な DIV に文字を入力することはできません: http://jsfiddle.net/twST6/1/

このコードを Opera で動作させる方法を誰かが説明して解決できますか?

助けてくれてありがとう。

4

1 に答える 1

1

面白い。問題は、Operaのキー押下イベント中にDOMを変更すると、ネイティブブラウザのキー押下アクションが発生しなくなることだと思います（これは以前に見たことがあると思います）。キーを押すたびに選択範囲を保存しないようにする以外に、簡単な方法はわかりません。もう1つの解決策は、選択範囲をコンテンツ内の文字インデックスとして保存することです。これにより、DOMは変更されないため、機能するはずです。この答えを参照してください：

https://stackoverflow.com/a/5596688/96100

また、Rangy用のより堅牢な文字インデックスベースの選択の保存/復元をリリースするところです。こちらのデモをご覧ください：

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

ちなみに、Rangyには選択マーカーを削除するための組み込みの方法があります。

rangy.removeMarkers(saved_selection);
于 2012-05-21T09:12:56.233 に答える