流れとしては以下のような感じです。
1:親ウィンドウからthickboxで別ファイルを開く(iframeとして)
2:開いたページで「挿入」ボタンを押す
3:親ウィンドの指定箇所にテキストが挿入される
問題は、開いたページ上で画面をクリックすると、親ウィンドウのカーソル位置(キャレット)からはずれてしまうことです。
thickboxで開いたページはサブウィンドウではなく、同一画面上で開いているのでこうなると思いますが、何か対処法はないでしょうか?ご存じの方は教えて下さい。
※ちなみにthickboxを使用しない場合は、1~3の操作に問題はありません。
> おそらくこれはIEの問題だと思います。
なるほど、たしかに。
大雑把な対応ですが、問題そのものはクリアしましたので、再度確認してください。
http://regnif.web.fc2.com/test/thickbox/
※IEのキャッシュをクリアしないと古いソースが残ってしまう場合が多いです。
ポイントとしては、ThickBoxで表示したiframeをクリックしてしまうと、IEの場合、親ウィンドのtextareaからfocusが外れてしまうので、子ウィンド(child.html)のonloadイベントで「先にselectionオブジェクトを取得しておく」です。(uaがIEの場合のみ)
最近の流れでonloadイベントへのハンドラ登録はあまり推奨されませんが、そこはリスナー方式に変更するなど、必要に応じてお願いします。
参考までに。(もっと良い情報ソースがあったはずですが、本題を逸脱するので、ぱっと見つかったものを貼り付けておきます。)
http://regnif.web.fc2.com/test/thickbox/
でどうでしょう?
thickboxを使用しない場合には問題ないということは親ウィンドウをparentで取得する箇所がわからなかったということだと思います。
insert_textarea.jsを見てみてください。
NGなソース OR thickboxで問題ないソースがあると、より現実に近い実装が可能です。
つまり、親ウィンドの指定箇所とやらが、div要素なのか、formなのかわからなかったので、ボクの中で1番難しいtextareaに挑戦してみました。
枝葉末節になっちゃいそうですが、一応textareaのカーソル位置に「★挿入テキスト★」を挿入します。
というのをIEとFirefoxでは動作する程度のクロスブラウザ対応もしてみました。
サンプルまで作っていただき、大変嬉しく思います。意図通り出来ていたら別途ポイントを、、、と考えていたのですが、難がありました。
以下の手順で試してみて下さい。(私はIE7で試しました)
1:テキストボックス内のテキスト最終部をクリック(「実装&確認しています。」の右)
2:「thickboxでiframeを表示」をクリックしてthickboxの画面を開く
3:ボタンではなく、白背景の部分をクリック
4:「親ウィンドウにテキストを挿入」ボタンをクリック
5:テキストボックスの先頭に挿入される(指定箇所に挿入されない)
おそらくこれはIEの問題だと思います。FIrefoxでは全く問題ありません。
ちなみに私がテストしているソースはi4ooonさんがサンプルで作られた物とほぼ同じです。textarea内への挿入です。
> おそらくこれはIEの問題だと思います。
なるほど、たしかに。
大雑把な対応ですが、問題そのものはクリアしましたので、再度確認してください。
http://regnif.web.fc2.com/test/thickbox/
※IEのキャッシュをクリアしないと古いソースが残ってしまう場合が多いです。
ポイントとしては、ThickBoxで表示したiframeをクリックしてしまうと、IEの場合、親ウィンドのtextareaからfocusが外れてしまうので、子ウィンド(child.html)のonloadイベントで「先にselectionオブジェクトを取得しておく」です。(uaがIEの場合のみ)
最近の流れでonloadイベントへのハンドラ登録はあまり推奨されませんが、そこはリスナー方式に変更するなど、必要に応じてお願いします。
参考までに。(もっと良い情報ソースがあったはずですが、本題を逸脱するので、ぱっと見つかったものを貼り付けておきます。)
出来ました!完全に思い通りですし、短いソースで出来ることに驚いています(笑)
詳しい説明、対応本当に感謝します。ありがとうございました。
出来ました!完全に思い通りですし、短いソースで出来ることに驚いています(笑)
詳しい説明、対応本当に感謝します。ありがとうございました。