Thickboxを利用してページの操作をしています。

流れとしては以下のような感じです。

1:親ウィンドウからthickboxで別ファイルを開く(iframeとして)
2:開いたページで「挿入」ボタンを押す
3:親ウィンドの指定箇所にテキストが挿入される

問題は、開いたページ上で画面をクリックすると、親ウィンドウのカーソル位置(キャレット)からはずれてしまうことです。

thickboxで開いたページはサブウィンドウではなく、同一画面上で開いているのでこうなると思いますが、何か対処法はないでしょうか?ご存じの方は教えて下さい。

※ちなみにthickboxを使用しない場合は、1~3の操作に問題はありません。

回答の条件
  • 1人2回まで
  • 登録:2009/07/13 17:40:03
  • 終了:2009/07/15 18:37:32

ベストアンサー

id:i4ooon No.2

regnif回答回数56ベストアンサー獲得回数202009/07/15 14:52:22

ポイント100pt

> おそらくこれはIEの問題だと思います。

なるほど、たしかに。

大雑把な対応ですが、問題そのものはクリアしましたので、再度確認してください。

http://regnif.web.fc2.com/test/thickbox/

※IEのキャッシュをクリアしないと古いソースが残ってしまう場合が多いです。

ポイントとしては、ThickBoxで表示したiframeをクリックしてしまうと、IEの場合、親ウィンドのtextareaからfocusが外れてしまうので、子ウィンド(child.html)のonloadイベントで「先にselectionオブジェクトを取得しておく」です。(uaがIEの場合のみ)

最近の流れでonloadイベントへのハンドラ登録はあまり推奨されませんが、そこはリスナー方式に変更するなど、必要に応じてお願いします。

参考までに。(もっと良い情報ソースがあったはずですが、本題を逸脱するので、ぱっと見つかったものを貼り付けておきます。)

http://www.vividcode.info/js/event/eventListener.xhtml

id:kt26

出来ました!完全に思い通りですし、短いソースで出来ることに驚いています(笑)

詳しい説明、対応本当に感謝します。ありがとうございました。

2009/07/15 18:37:13

その他の回答(1件)

id:i4ooon No.1

regnif回答回数56ベストアンサー獲得回数202009/07/14 19:00:29

ポイント100pt

http://regnif.web.fc2.com/test/thickbox/

でどうでしょう?

thickboxを使用しない場合には問題ないということは親ウィンドウをparentで取得する箇所がわからなかったということだと思います。

insert_textarea.jsを見てみてください。

NGなソース OR thickboxで問題ないソースがあると、より現実に近い実装が可能です。

つまり、親ウィンドの指定箇所とやらが、div要素なのか、formなのかわからなかったので、ボクの中で1番難しいtextareaに挑戦してみました。

枝葉末節になっちゃいそうですが、一応textareaのカーソル位置に「★挿入テキスト★」を挿入します。

というのをIEとFirefoxでは動作する程度のクロスブラウザ対応もしてみました。

id:kt26

サンプルまで作っていただき、大変嬉しく思います。意図通り出来ていたら別途ポイントを、、、と考えていたのですが、難がありました。


以下の手順で試してみて下さい。(私はIE7で試しました)


1:テキストボックス内のテキスト最終部をクリック(「実装&確認しています。」の右)

2:「thickboxでiframeを表示」をクリックしてthickboxの画面を開く

3:ボタンではなく、白背景の部分をクリック

4:「親ウィンドウにテキストを挿入」ボタンをクリック

5:テキストボックスの先頭に挿入される(指定箇所に挿入されない)


おそらくこれはIEの問題だと思います。FIrefoxでは全く問題ありません。


ちなみに私がテストしているソースはi4ooonさんがサンプルで作られた物とほぼ同じです。textarea内への挿入です。

2009/07/14 19:57:58
id:i4ooon No.2

regnif回答回数56ベストアンサー獲得回数202009/07/15 14:52:22ここでベストアンサー

ポイント100pt

> おそらくこれはIEの問題だと思います。

なるほど、たしかに。

大雑把な対応ですが、問題そのものはクリアしましたので、再度確認してください。

http://regnif.web.fc2.com/test/thickbox/

※IEのキャッシュをクリアしないと古いソースが残ってしまう場合が多いです。

ポイントとしては、ThickBoxで表示したiframeをクリックしてしまうと、IEの場合、親ウィンドのtextareaからfocusが外れてしまうので、子ウィンド(child.html)のonloadイベントで「先にselectionオブジェクトを取得しておく」です。(uaがIEの場合のみ)

最近の流れでonloadイベントへのハンドラ登録はあまり推奨されませんが、そこはリスナー方式に変更するなど、必要に応じてお願いします。

参考までに。(もっと良い情報ソースがあったはずですが、本題を逸脱するので、ぱっと見つかったものを貼り付けておきます。)

http://www.vividcode.info/js/event/eventListener.xhtml

id:kt26

出来ました!完全に思い通りですし、短いソースで出来ることに驚いています(笑)

詳しい説明、対応本当に感謝します。ありがとうございました。

2009/07/15 18:37:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません