人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Thickboxを利用してページの操作をしています。
流れとしては以下のような感じです。

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

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

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

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


●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:ウィンドウ カーソル クリック テキスト ファイル
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● regnif
●100ポイント

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内への挿入です。


2 ● regnif
●100ポイント ベストアンサー

> おそらくこれは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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ