複数のテキスト選択をブラウザでサポートするにはどうすればよいですか？

Question

私は、Webベースの注釈ツールを構築しています。ここで、エンドユーザーはHTMLドキュメントからテキストのセクションを選択して注釈を付けることができます。選択されたテキストとそれに対応する範囲にプログラム的に話したり、アクセスして作業することは、 "window.getSelection"と "getRangeAt"を使って簡単です。

しかし、このすべてをクロスブラウザアプリケーションにまとめようとすると、問題が発生しています。 Safariでは、HTMLボタン（「注釈」ボタン）をクリックすると、ボタンをクリックしてもテキストキャレットの位置が変わったように、現在のユーザーのテキスト選択が消えてしまうことに気付きました。 window.getSelectionにアクセスしようとする私のコードはこのボタンのスクリプトから実行され、そこに選択が存在しないことが報告されます。

Google Docs、特にワードプロセッシングアプリケーションがこれを処理する方法を掘り下げ、本質的にテキストを選択し、 "太字"または "フォントの変更"をクリックする動作と仕組みが注釈機能に対応しています。 Googleドキュメントでは、編集するドキュメントのテキストをiframeに読み込みます。このことを巡って、Firefoxは、複数のフレームまたはiframeを含むWebページで複数の選択範囲をサポートしていることを知りました。言い換えれば、ベースページのテキストのセクションと、最初の選択がなくなるiframe内のテキストの別のセクションを選択できます。このGoogle Docsソリューションは、FirefoxとSafari（私が興味を持っている2つのブラウザ）の両方で動作します。しかし、このソリューションをテストするための簡単なサンプルページを作成したとき、Safariでは動作しませんでした。ボタンをクリックするか、ルートページ（iframeの外側）でテキストを選択すると、現在選択されているiframeが消えます。

誰かがこれを機能させるためにここで行方不明を知っていますか？または、これを動作させる別の方法を提案してください。

Answer 1

私はFirefoxはアウトオブボックス地獄、Firefoxは1つもフレーム上の複数の選択をサポート

複数のフレーム

を含むWebページに複数の選択範囲をサポートしていることを学びました！ （別のテキストをクリックしてCtrlキーを押しながらクリックしてみてください）

SafariでHTMLボタンをクリックすると、現在のユーザーテキストの選択が消えるようになりましたボタンはテキストキャレットの位置を変更しました

Windows版Safari 3.2.1で動作します。 <ボタン>、<入力タイプ= "ボタン">または<>をクリックすると、そのフレームが選択されたままになります。ただし、別のフレームにある場合はグレー表示になります。 'window.getSelection（）'は引き続き通常通り動作します。

あなたはテストケースを投稿できますか？また、Safariのバージョンが間違っていますか？

Answer 2

イベントハンドラを（clickイベントまたはmouseupイベントではなく）ボタンのmousedownイベントまでフックします。これにより、現在の選択がクリアされる前にそれを取得することができます。

選択肢を変数に格納し、ボタンがクリックイベントを受け取った場合にのみ変数を使用することで、ユーザーエクスペリエンスを維持できます。このように：私の頭の上オフ

<button onmousedown="sel = window.getSelection()" onclick="alert(sel)">What's the selection?</button> 

Answer 3

、私はあなたの最も簡単な解決策は、あなたが心配する必要はありません。この方法でテキスト選択にイベントハンドラをアタッチし、バッファに現在の選択を保存することだと思いますタイミングについて。

は、このページの放火犯を開き、次のコードを実行します。

var buffer = ''; 
$('p').mouseup(function() { 
    buffer = window.getSelection(); 
}); 

あなたは、あなたが望むものは何でも選択して実行することにより、最後に選択したテキストを参照することができます：/

console.log(buffer); 

出来上がりを、クリックしてくださいタイミング問題の解決を選択解除してください:)