フォーム内のテキストフィールドにアドレスを入力後、Enterキーを入力して移動する方法

前へ 次へ
このQ&Aのポイント
  • フォーム内のテキストフィールドにアドレスを入力し、Enterキーを押すと、指定したアドレスに移動する方法について教えてください。
  • 以下のコードを使用して、フォーム内のテキストフィールドに入力したアドレスに移動する方法を試しましたが、うまくいきませんでした。
  • 解決策をご存知の方は、教えていただけると助かります。
回答を見る
  • ベストアンサー

フォーム内のテキストフィールドにアドレスを入力後、Enterキーを入力して移動したい

フォーム内のテキストフィールドにアドレスを入力後、Enterキーを入力して 移動するにはどうすればよいのでしょうか？ 以下のようなコードを作成したのですがうまくいきませんでした。 <html> <head> <script type="text/javascript"> function jumpURL() { url = document.f.t.value; location.href = url; } </script> </head> <body> <form name="f" onSubmit="jumpURL()"> <input type="text" name="t" id="t"> </form> </body> </html> ご存知の方がおられましたらご回答をよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#30818
noname#30818
回答No.2

こんな流れで良いじゃないかな？（動作未確認） window.onload = function(){ document.getElementById('t').onkeydown = function (ev){ var ev = (!ev) ? event:ev;//Firefox1.5ではevにイベントが入る var key = ev.keyCode;//取り合えずkeyCodeを取る。 alert(key)//Enterキーを押して確認してください。 var mf = (ev.modifiers) ? ev.modifiers : ((ev.altKey) ? 1 : 0) + ((ev.ctrlKey) ? 2 : 0) + ((ev.shiftKey) ? 4 : 0);//NNがmodifiersでIE,FirefoxがctrlKey、shiftKey、altKeyだったかな？ alert(mf)//Enterキーを押して確認してください。 var k = key + '_' + mf;//ここでkeyCode_modifiersと言う形を作る。 alert(k)//Enterキーを押して確認してください。 if(k == '13_0'){//Enterキーで装飾キーが押されていない。 url = document.f.t.value; location.href = url; } } }

nana_watuki
質問者

補足

上記の通りにやってみたところFirefox2では動作したのですが IE6では動作しませんでした。（alertは表示されるがページ移動をしない）

その他の回答 (2)

noname#30818
noname#30818
回答No.3

<script type="text/javascript"> window.onload = function(){ document.getElementById('t').onkeydown = function (ev){ var ev = (!ev) ? event:ev;//Firefox1.5ではevにイベントが入る var key = ev.keyCode;//取り合えずkeyCodeを取る。 alert(key)//Enterキーを押して確認してください。 var mf = (ev.modifiers) ? ev.modifiers : ((ev.altKey) ? 1 : 0) + ((ev.ctrlKey) ? 2 : 0) + ((ev.shiftKey) ? 4 : 0);//NNがmodifiersでIE,FirefoxがctrlKey、shiftKey、altKeyだったかな？ alert(mf)//Enterキーを押して確認してください。 var k = key + '_' + mf;//ここでkeyCode_modifiersと言う形を作る。 alert(k)//Enterキーを押して確認してください。 if(k == '13_0'){//Enterキーで装飾キーが押されていない。 url = document.f.t.value; url = (url == '') ? './':url location.href = url; return false; } } } </script>

nana_watuki
質問者

お礼

上記の通りにやってみたところ問題を解決することができました。 ご回答いただきどうもありがとうございました。

noname#30818
noname#30818
回答No.1

それで上手く行かないならonkeydownを使ったら如何でしょうか。 OSで違いがあるかもしれませんがEnterキーは event.keyCode==13 event.altKey=flase event.ctrlKey=false event.shiftKey=false または event.keyCode=13 event.modifiers==0 こんな感じだったとおもいました。 その後条件を満たしたら url = document.f.t.value; location.href = url; で上手く行かないかな？

nana_watuki
質問者

補足

以下のように作ってみたのですがうまくいきませんでした。 具体体にはどのようにすればよいのでしょうか？ （ちなみに使用しているOSはWindows XP、ブラウザはIE6です） <html> <head> <script type="text/javascript"> function jumpURL() { if( event.keyCode=13 && event.modifiers==0 ) { url = document.f.t.value; location.href = url; } } </script> </head> <body> <form name="f"> <input type="text" name="t" id="t" onKeyDown="jumpURL()"> </form> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ENTERキーを無効にしたいのですが教えて下さい

    ENTERキーを無効にしたいのですが、SUBMITボタンでjavascriptを動かしています。 SUBMITを押した瞬間に、別ウィンドウにデータを渡しているのですが、 どの部分にどのようなスクリプトを追加すれば良いでしょうか？ 良かったら教えて下さい。 ■親ウィンドウのHTML <html> <head> <title>親</title> <script type="text/javascript"> <!-- window.name = (new Date()).getTime();　　　 function make_newwin(f) { 　　f.target = window.name + "_ko"; 　　var w = window.open("about:blank", f.target, "スタイル設定"); 　　w.focus(); } //--> </script> </head> <body> <form name="test" action="/cgi-bin/test-check.cgi" method="post" onSubmit="make_newwin(this)"> <input type="submit"> </form> </body> </html>

  • テキストフォームのチェックについて

    テキストファームの内容チェックについて教えてください。 下記コードで取得したURLをテキストフォームに表示させ「onclick」でiframeに画面を表示させています。 これを、テキストファームが書き換わった段階で、実行することは できないでしょうか？ （テキストフォーム内のURLが書き換わったら、その内容をチェック して、iframeにそのURLの画面を表示する） <html> <form name="f1"> URL:<input type="text" name="url" size="60" value="" /> <input type="button" value="このURLへ移動" onclick="target_name=***.location.href=this.form.url.value"> </form> <script type="text/javascript"> function set_latlng() { document.f1.url.value="http://***.***.****" /script> 以上、宜しくお願い致します。

  • Enterキーでボタンが押下＆新しいタブで開くには

    こちらで教えていただきながら、下記のようなhtml文にたどり着きました。 加えて以下のことをしたいと思っており、解説を読みながらいろいろ試していますがうまくいきません…。 (1)テキストボックスに文字を入力した後、Enterキーでボタンが押下されるようにしたい (2)結果の画面を新しいタブで表示したい （head部分に<base target="_blank">と記述してもでダメでした） 上記2つのことが出来るようでしたら、その方法を教えていただけないでしょうか。 どうぞよろしくお願いいたします。 -------------------------------------------- <html> <head> <script type="text/javascript"> <!-- function jump1(){ location.href="http://minkabu.jp/stock/" + document.getElementsByName("code1")[0].value; } function jump2(){ location.href="http://kabu-sokuhou.com/brand/item/code___" + document.getElementsByName("code2")[0].value; } //--> </script> <base target="main"> </head> <body> <form> <input name="code1" size="4" > <br><br> <input type="button" onclick="jump1()" value="サイト１へ"> </form> <form> <input type="hidden" name="code2" size="4"> <input type="button" onclick="jump2()" value="サイト２へ"> </form> </body> </html> -----------------------------------------------------

    • ベストアンサー
    • HTML
  • ENTERキーを無効にしたいのですが教えて下さい。その２

    以前、以下の方法を教えていただいてうまくいったのですが、 ボタンを画像ボタンにし、javascriptで、押したら沈むボタンを 作成したところ、ENTERキーが無効にならなくなりました。 ENTERキーを押されて送信されないことが先決なので、 どなたかご伝授いただければと思います。 以前のスクリプト <html> <head> <title>親</title> <script type="text/javascript"> <!-- window.name = (new Date()).getTime(); function make_newwin(f) { 　　f.target = window.name + "_ko"; 　　var w = window.open("about:blank", f.target, "スタイル設定"); 　　w.focus(); 　　f.submit(); } //--> </script> </head> <body> <form action="/cgi-bin/test-check.cgi" method="post" onSubmit="return false"> <input type="button" value="送信" onClick="make_newwin(this.form)"> </form> </body> </html> こちらで、 <input type="button" value="送信" onClick="make_newwin(this.form)"> これを以下のようにtypeを変えてしまったところ、効かなくなりました。 <input type="image" SRC="new.gif" ALT="新規登録ボタン" NAME="botan_new11" WIDTH="78" HEIGHT="26" BORDER="0" ID="botan_new" border=0 onMouseOver="MM_swapImage('botan_new11','','botan_new_sw.gif',1)" onMouseOut="MM_swapImgRestore()" onClick="make_newwin(this.form)"> これは、無理な話なのでしょうか？教えて下さい。

  • テキストフィールドの入力規則（数値チェック）

    http://oshiete1.goo.ne.jp/kotaeru.php3?q=143226 を参考にさせていただいて、以下のコードで実行してみました。 =============================== <BODY> <FORM NAME="f" ACTION="UPDATE" METHOD="POST" TARGET="FRAME_D" onSubmit="return conf();"> <INPUT TYPE="TEXT" NAME="FM_KINGAKU" onKeyDown="return keyCheck(event.keyCode);" > <SCRIPT TYPE="text/javascript" SRC="./JS.SOURCE"></SCRIPT> <SCRIPT TYPE="text/javascript"> <!-- function keyCheck(keyCodes){ if((keyCodes >= 49 && keyCodes <= 57) || (keyCodes >= 96 && keyCodes <= 105) || keyCodes == 46 || keyCodes == 8) return true; else return false; } function conf(WK_LINEINDEX){ /* 省略 */ } // --> </SCRIPT> </FORM> </BODY> =============================== しかし、数値以外のキーを押しても何事もなかったかのように 入力できてしまうのです。 前の質問者のlovelypoohさんは解決されたみたいなんですが、 いったい何が違うのでしょう？ onSubmit="return conf();"　ってのと onKeyDown="return keyCheck(event.keyCode);"　ってのが 同じFORMタグの中にある、とか関係あるのでしょうか？

  • 引数の使い方

    サブのHTML(1)にある関数LC2の引数goの使い方が解りません。 function LC2(){ if (url2.value != "") { parent.f1.location.href=url2.value } else { alert("URLを入力してください") } だったら分かるのですが、引数としてgoをあえて入れる意味が解らないです。 サブのHTML(1) <!DOCTYPE HTML > 省略 <script type="text/javascript"> <!-- function LC2(go){ if (go.url2.value != "") { parent.f1.location.href=go.url2.value } else { alert("URLを入力してください") } } //--> </script> </head> <body> <form name="URL2"> <input type="text" name="url2" value="http://" size=40 > <input type="button" name= "CF2" value=" Go!! " onClick="LC2(this.form)"> </form> </body></html> メインのHTML <!DOCTYPE HTML> <html><head> <title></title> </head> <frameset rows="*,100"> <frame src="f1.html" name="f1"> <frame src="f2.html" name="f2"> </frameset> <noframes> フレーム機能を使用しています。フレーム対応のブラウザで試してください </noframes> </html> サブのHTML(2) <!DOCTYPE HTML > <html><head> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> </head> <body> *入力されたURLを別フレームに表示 </body></html>

  • テキストエリアをenterキーでフォーカス移動したい

    複数あるテキストエリア間を、enterキーでフォーカス移動をしたいです。 以下のようにしましたが、２つめのテキストエリアへフォーカス移動すると、改行が入力され、カーソルが２行目へ移動してしまいます。 enterキーを押しているのでこうなってしまうと思うのですが、 カーソルが１行目へ移動するようにするには、どうしたらいいでしょうか？ フォーカス移動後に改行コードがあったら、""にreplaceする・・等、試してみたのですが、なかなか上手くいきません。 どなたかお分かりになる方がいらっしゃったら、教えてください。 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function FirstFocus() { document.forms.F1.elements[0].focus(); } function nextFocus(n) { if (event.keyCode == 13) { for (var i = 0, f = n.form.elements; i < f.length; i++) { if (f[i] == n) { (f[i + 1] || f[0]).focus(); } } } } //--> </SCRIPT> </HEAD> <BODY onload="FirstFocus()"> <FORM name="F1"> <TEXTAREA name="T1" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T2" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T3" rows="5" cols="30"></TEXTAREA><BR> </FORM> </BODY> </HTML>

  • 別なページにジャンプさせたい

    ボタンをクリックすると指定のページに飛ぶようにしたいのですが、 <html> <head> <script language="JavaScript"> function jump(){ location.href="index.html"; } </script> </head> <body> <form onSubmit="jump()"> <input type="submit"> </form> </body> </html> でも <html> <head> <script language="JavaScript"> function jump(){ location.href="index.html"; } </script> </head> <body> <form> <input type="submit" onClick="jump()"> </form> </body> </html> でも動きません。（そのページを表示したままです） <body onload="jump()">にしたときは正常にジャンプできるので、クリックのイベントが拾えていないと思うのですが、どのように記述すればいいのでしょうか。 よろしくお願いいたします。

  • WEBの入力フォームについて

    昨年の同じ時期に入力フォームについて質問し、回答をいただいたのですが、少し使い勝手を改善したく再度質問いたします。 テキストボックス　Ａ ラジオボタン　１、２、３ テキストボックス　Ｂ テキストボックスＡに入力後、ラジオボタンで２を選択すると、テキストボックスＢに自動的に入り、１及び２の場合はブランク（入力不可）というものです。 以下が前回回答をいただいたものです。 改善したいところは、最初にこのファイルを呼び出したときにはテキストボックスＢに入力できてしまうところです。その後ラジオボタンを動かすと２選択以外には入力はできなくなりますが、はじめから入力不可にしたいと思っています。（ラジオボタンの初期値は１です。） また、２を選択後、テキストボックスＢにカーソルを当てると左下のステータスバーにエラーと表示されるのはしかたのないことでしょうか。（テキストを修正することもありえるので、２を選択した場合は自動で入りつつ修正もできるようにしたいです。） 以上、よろしくお願いします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <script language="JavaScript" type="text/JavaScript"> function copyab(f){ f.elements["name3"].disabled=false; f.elements["name4"].disabled=false; f.elements["name3"].value=f.elements["name1"].value f.elements["name4"].value=f.elements["name2"].value; } function clearb(f){ f.elements["name3"].value=""; f.elements["name4"].value=""; f.elements["name3"].disabled=true; f.elements["name4"].disabled=true; } </script> <FORM>A1 <INPUT type="text" name="name1"> A2<INPUT type="text" name="name2"><BR> 区分 <INPUT name="address" type="radio" value="1" onclick="clearb(this.form)" checked> 1　<INPUT name="address" type="radio" value="2" onclick="copyab(this.form)"> 2　<INPUT name="address" type="radio" value="3" onclick="clearb(this.form)"> 3<BR> B1<INPUT type="text" name="name3" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';"> B2<INPUT type="text" name="name4" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';"> </FORM> </BODY> </HTML>

  • ＪＡＶＡＳＣＲＩＰＴでＩＮＰＵＴ

    ＨＴＭＬとＪＡＶＡＳＣＲＩＰＴとＪＳＰを使ってシステム構築をしております。 --------------- <html> <head> <SCRIPT Language="JavaScript"> <!-- function send() { alert("<input type=text name=name2>"); } //　--> </SCRIPT> </head> <body> <form onSubmit="send(); return false;"> <input type=text name=name1> <input type=submit> </form> </body> </html> --------------- 上記のコードでやりたいことは、 submitボタンが押されたときにJAVASCRIPTを呼び出し JAVASCRIPT上で文字を入力し次画面へ送信するような機能を作りたいと思っているのですが、本を見てもなかなか載っていません。 もしかしたらJAVASCRIPTだけではできないかもしれません。 ＪＳＰまたはＰＨＰで出来る機能でも良いので教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する