- ベストアンサー
テキストフォームのチェックについて
- テキストフォームの内容チェックについて教えてください。
- テキストフォームが書き換わった段階で実行することはできないでしょうか？
- テキストフォーム内のURLが書き換わったら、その内容をチェックして、iframeにそのURLの画面を表示する方法について教えてください。
- ken0109
- お礼率58% (10/17)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
グーグルマップのＵＲＬは自動的に読み取るのではなく手動でよかったですかね？ 自動で読み込んで別のものにリンクさせようとしたものの、セキュリティの問題でちょっと手が出せそうではなかったもので。 それとグーグルマップと他のフリーマップでは緯度経度の算出方法（たぶんグーグルは１０進、gooとyahooは６０進）だったのでリンクさせるにはその点も考慮が必要なようです。 マップのＵＲＬを変えると同時にiframe要素に反映させるのは、タイマーsetTimeoutで監視させることで簡単に実装ますが、ふたつのマップデータを同時に扱うため高速処理がいっぱいいっぱいでした。入力チェックはともかく、これの連携は遅さが目立って実用的じゃなかったです；； ひとまず適当に作ったＨＴＭＬを置いておきます。yahooマップのアドレスをgooマップのアドレスに変換し自動表示させるものです。 IE,NN,Firefoxで動作確認しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN"> <html> <head> <title>map test</title> <style type="text/css"> <!-- --> </style> <script language="JavaScript"> <!-- function setrun() { var tempstr; var tempint; var yahmap; var goomap; var earthN; var earthE; yahmap = document.getElementById("strurl").value; //入力チェック。ちょっと変数名わるいやね if ( yahmap.indexOf("lat=") == -1 || yahmap.indexOf("lon=") == -1 ) { alert("入力内容が怪しい"); return false; } //緯度経度取得 tempint = yahmap.indexOf("lat=") + 4; earthN = yahmap.substring( tempint , yahmap.indexOf( "&" , tempint + 2 )); tempint = yahmap.indexOf("lon=") + 4; earthE = yahmap.substring( tempint , yahmap.indexOf( "&" , tempint + 2 )); goomap = "http://map.goo.ne.jp/map.php?MAP=E" + earthE + "N" + earthN + "&ZM=11" document.getElementById("sakimap").contentWindow.self.location.href = goomap; return false; } // --> </script> </head> <body> <iframe id="gogmap" name="gogmap" src="ht tp://map.yahoo.co.jp/pl?lat=35.27.1.51&lon=139.38.7.68&sc=2&mode=map&type=scroll" height=600 width=600 scrolling=yes> この部分は iframe 対応のブラウザで見てください。 </iframe> <iframe id="sakimap" name="sakimap" src="ht tp://map.goo.ne.jp/map.php?MAP=E139.38.7.868N35.27.1.753&ZM=11" height=600 width=600 scrolling=yes> この部分は iframe 対応のブラウザで見てください。 </iframe> <BR><BR> <form id="theform" action="#" onsubmit="setrun();return false;"> Yahooの地図右上の「この地図のＵＲＬ」を右クリックしてショートカットのコピーをし、それを下に入力しEnter key<BR> <input type="text" id="strurl" name="strurl" size="80" value=""> <input type="submit"> <form> </body> </html>
その他の回答 (1)
- benelli
- ベストアンサー率51% (78/152)
<input type="text" name="url" size="60" value="" /> 試してませんがこれをこう変えてみたらどうですか？ <input type="text" name="url" size="60" value="" onchange="target_name=***.location.href=this.form.url.value" /> それより「その内容をチェック」するところのそのチェック方法が分からなければどうしようもないんですが。 今一度必要な情報の整理をオススメします。問題すべての解決はそのあとかと。
補足
benelli さん ありがとうございます。記述していただいスクリプトは試して みたのですが、エラーも何も出ず変化なしの状態でした。 また、説明が悪く申し訳ありません。 Google Mapsと連携し別の地図の同じ場所を表示するというものを 作成しています。 テキストフォームには、Goolge Mapsで取得した緯度と経度を変換し 遷移先のURLに埋め込んだものが表示されています。 このテキストフォームの内のURLは、Google Maps をマウスで移動 させると内容が書き換わります。 （http://http://***.***.****"x=000.Y=222 がマウス移動で http://***.***.****" x=123、Y=345というようになります。） URLが書き換わったタイミングで、そのURLをiframeに表示させるという ことをおこないたいと考えています。 以上、宜しくお願い致します。
お礼
benelli さん ご連絡が遅れてしまい申し訳ありませんでした。 Google Mapsの緯度経度を取得しテキストフォームに入力はできました。 ただ、マウス移動でテキストフォーム内のURLが変わるのですが、 この変更を自動的にチェックして実行というのはできませんでしたので、もう少し考えてみます。 document.getElementById("AAA").innerHTML = "経度=" + AAA_latlng.lng.toFixed(6) + "緯度=" +AAA_latlng.lat.toFixed(6); document.f1.url.value="http://***/X="+AAA_latlng.lng+"&Y="+AAA_latlng.lat"