スマホでフォームにフォーカスする方法
- スマホでフォームにフォーカスする方法について解説します。
- ページ読み込み終了時に特定の入力フォームに自動でフォーカスする方法を探しています。
- PCのブラウザではうまく動作するが、スマホではうまくいかない状況です。回避策や対処方法を教えてください。
- ベストアンサー
スマホでフォームにフォーカスする方法
スマホでフォームにフォーカスする方法についてです。 ページ読み込み終了時に、 特定の入力フォームに自動でフォーカスしたいのですが、 うまくいきません。 通常、PCのブラウザだと以下のようにするとフォーカスするのですが、 スマホ（iPhone等）では動作しません。 $(document).ready( function() { $("#f1").focus(); }); もしくは、 window.onload=function(){ var elem = document.getElementById("f1"); elem.focus(); } ※f1 は input の id です。 なにか回避策や対処方法はありませんでしょうか？ よろしくお願いいたします。
- duowhite
- お礼率100% (46/46)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
書き方は正しいですが、スマートフォンでは無効化されているので使えません。 なぜなら急にオートフォーカスさせるとなると、スマホの場合、キーボードを出さなくてはいけないため、ユーザーの混乱に招きかねないからです。 フォーカスを持って行ける例を参考URLに乗せておきましたので、ご覧ください。
関連するQ&A
- Safari3にて、新しく開いたウィンドウの入力フォームにフォーカスが合いません
はじめまして。 javascriptでフォームにフォーカスを当てる処理として、下記のfocusTextファンクションをonloadで呼び出しています。 function focusText(){ document.getElementById("toFocus").focus(); } しかし、Safari3.2.2の場合、対象のHTMLを target="_blank" にて開いた場合にフォーカスが合ってくれません。 window.opener.blur(); を挟んでもうまく行きませんでした。 Safari4や、Interner Explorer、Google Chrome、Firefox等ではうまく行っています。 OSはWindows Vistaです。 解決策をおわかりの方、ご教授いただければ幸いです。 サンプルのソースを下記に記述します。 宜しくお願い致します。 == base.html == <html> <head></head> <body> <a href="new.html" target="_self">自身のウィンドウ</a><br> <a href="new.html" target="_blank">新しいウィンドウ</a> </body> </html> == new.html == <html> <head> <script type="text/javascript"> function focusText(){ document.getElementById("toFocus").focus(); } </script> </head> <body onload="focusText();"> <form> <input type="text" id="toFocus"> </form> </body> </html>
- 締切済み
- JavaScript
- フォーカスする際のテキストフィールド名を変数で渡したい
表のような入力フォームがあって、submitした際にあるプログラムが走り、HTML本体を再読み込みしています。 画面が表示されたときに、テキストフィールドにあらかじめフォーカスを合わせるには、以下のOnloadとfocus()を使いますよね？ <body onLoad="document.Form.Field.focus()"> で、再読み込み時には、次の入力用テキストフィールドへフォーカスを合わせたいのですが、どうすればいいでしょうか？ 例えば A1 A2 A3 というとき、A1を入力後、後ろでプログラムが走り、再読み込みして画面が再表示されたときに、A2にフォーカスがうつっている、という感じです。通常の書き方だとBodyにはひとつか(A1しか)かけないので・・・変数を使ったらどうかと思ってやってみましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!-- var f; f = "A1"; window.alert(f); //--> </SCRIPT> <body onLoad="document.Form.(f).focus()"> 又は <body onLoad="document.Form.var(f).focus()"> <body onLoad="document.Form.f.focus()"> フィールドにindextabをしてみましたがダメでした。又A1にonBlurが入っております。 そもそも変数なんて使えるのでしょうか？ 変数以外の方法でも、他にアイディアがあればお願いします。 締切りが明日で非常にあせっています。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- フォーカス移動のタイミング
<html> <head> <script type="text/javascript"> <!-- function getelementid(event){ try { return event.srcElement.id; } catch ( e ) { return event.target.id; } } function lostfocus(event){ elem_id = getelementid(event); elemid = elem_id.replace("1","2"); document.getElementById(elemid).style.visibility = "hidden"; } function tuikabuttonhyouji(event){ elem_id = getelementid(event); document.getElementById(elem_id).style.visibility = "visible"; } function tuikabutton(event){ elem_id = getelementid(event); elemid = elem_id.replace("1","2"); document.getElementById(elemid).style.visibility = "visible"; } --> </script> </head> <body> <textarea rows="1" id="test1" onblur="lostfocus(event);" onDblClick="tuikabutton(event);"></textarea> <input id="test2" style="visibility: hidden;" type="button" value="click" onFocus="tuikabuttonhyouji(event);"> </body> </html> 実装したい機能を部分的に抜き出した部分のソースが上の部分です。 実装したい機能しては、 ・テキストエリアをダブルクリックしたらclickボタンを表示 ・テキストリアからフォーカスが外れたらclickボタンを非表示にする ・ただし、フォーカスの移動先がclickボタンなら非表示にしない なので上記のように書いてみたのですがうまくいきません。 何かいい案がありましたらよろしくお願いします。
- ベストアンサー
- JavaScript
- 開いたタブ（ウィンドウ）にフォーカスが当たらない
IE8 をタブモードで利用したとき、新しく開いた タブ（ウィンドウ）にフォーカスが当たりません。 JavaScript の window.open で別タブ（ウィンドウ）を 表示する処理を onload イベントで行うと、新しい タブ（ウィンドウ）にフォーカスがあたりません。 button のクリックイベントで表示した場合は、 新しいタブ（ウィンドウ）にフォーカスが当たります。 やりたいことは submit してページを再表示するときに 新しいタブ（ウィンドウ）を表示して、そちらにフォー カスを設定することです。 また、できればブラウザのバージョンによって処理を 切り替えるようなことはしたくありません。 何か原因や解決策などありましたらご教授ください。 よろしくお願いします。 ＜この現象が発生する環境＞ IE8 と IE7 で下記のように設定した場合 ツール → インターネットオプション → 全般タブ → タブ → 設定 → ポップアップの発生時 の設定を 「常に新しいタブでポップアップを開く」 にする。 ※IE9 ではこの現象は発生せず、新しいタブ（ウィンドウ）に フォーカスがあたります。 ※IE7, 8 でもタブモードではなく、別ウィンドウで開く 設定になっている場合は、新しいウィンドウにフォーカスが あたります。 ＜サンプルソースと説明＞ （説明） test1.html から window.open で test2.html を表示します。 onload で表示したときは test2.html のタブ（ウィンドウ）に フォーカスがあたりません。 button のクリックイベントで表示したときは test2.html の タブ（ウィンドウ）にフォーカスがあたります。 ---（test1.html）---------------------------------- <html> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> window.onload = function () { OpenWindowTest(); } function OpenWindowTest() { var TestWin = window.open('test2.html'); TestWin.document.focus(); } </script> </head> <body> <form> <div> <input type="button" value="button" onclick="OpenWindowTest();" /> <br /> <input type="submit" value="submit" /> </div> </form> </body> </html> --------------------------------------------------- ---（test2.html）---------------------------------- <html> <body onload="window.focus();"> テストページ </body> </html> ---------------------------------------------------
- 締切済み
- JavaScript
- なぜfunc()で動き、funcで動かないのか。
以前良く似た質問をしましたが、また疑問点が出たので質問します。 前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。 var img = new Image(); window.onload = function() { img.onload = func; } function func() { （省略） } その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。 しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { document.getElementById("result1").innerHTML = "result1"; } function result2() { document.getElementById("result2").innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか？ あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { this.innerHTML = "result1"; } function result2() { this.innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> 両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか？
- ベストアンサー
- JavaScript
- JavaScriptでフォームへのフォーカス処理
PHP、XHTML、CSSで応募フォームの作成をしております。 PHPとHTMLは別ファイルで作成しており、PHPにアクセスしてそのPHPが指定されたテンプレートを読みにいくような流れとなっております。 HTMLもPHPも完成して、応募フォームとして一通り動くようになったのですが、新たにフォーカス機能を追加したいということになりました。 具体的には、応募フォームの一番最初のテキストエリアに、ページ読み込み時にフォーカスを当てたいという内容です。 そこで、フォーカス機能用のJavaScriptを別ファイルで新たに作成し、動きを確認してみたところ上手く動きません。 HTMLとJavaScriptのソースは下記の通りです。 ==================================================================== ■HTML(全て書くと長くなってしまうので、簡略させていただきます) <script type="text/javascript" src="$path_top_js/focus.js"></script> <body onLoad="Focus()"> </head> <form name="top" action="index.php" method="POST" onReset="return false;" onSubmit="return false;"> <input type="hidden" name="USER_ID" value="$USER_ID"> <INPUT size="20" type="text" name="USER_ID" value="$USER_ID" MAXLENGTH="10"> </form> </body> ■JavaScript(focus.js) function Focus(){ document.top.USER_ID.focus(); } ==================================================================== 「フォームのname="USER_ID"というテキストエリアにフォーカスを当てる」という内容になります。 なぜフォーカスが当たらないのか、原因は予想がつくのですが、どう解決していいのか分かりません。 多分、フォームの値を保持するために記述しているhiddenタグ <input type="hidden" name="USER_ID" value="$USER_ID"> にJavaScriptのフォーカスが当たってしまっているみたいです。(フォーカスが当たっていると思われるhiddenタグは見ることができません) 試しにhiddenタグを外してみたところ、JavaScriptで指定したテキストエリアにフォーカスが当たっていることを確認しました。 「応募フォーム」ということで、ページ遷移した際にもフォームに入力した値を保持しておくためにhiddenタグは外したくないのですが、フォーカス機能もちゃんと動くようにしたいと思っております。 解決方法が分かる方いらっしゃいましたら、ご教授の程お願い致します。
- ベストアンサー
- HTML
- 以下のJavaScriptが、どんな動作をしているか教えて頂けないでし
以下のJavaScriptが、どんな動作をしているか教えて頂けないでしょうか？ var previousOnload = window.onload; window.onload = function() { if (previousOnload) { previousOnload(); } //radiobuttonIdは、radio buttonのIdです。 document.getElementById('radiobuttonId').checked = true; } if文の中でpreviousOnloadを呼んでるので、自分自身を呼んでると思うのですが、 特にwindow.onloadのfundtion()は何もreturnしてないので、if文に入ってるのが意味がわからなくて。。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- フォームのvalueを変更する方法
下記はjavaScriptで書いたものですが、javaScriptが有効になっていないと機能しないので perlで同じことをやりたいのですが、フォームのvalueを変更する方法とinnerHTMLの様なボタンをクリックするとテキストを変更する方法が分かりません。 ヒントでも良いので教えていただけませんか？ <HTML> <HEAD><SCRIPT language="JavaScript"> <!-- function nextA(){ var data = document.formA.data.value; data++; document.formA.data.value = data; } //--> function nextB(){ var data = document.formB.data.value; data++; document.formB.data.value = data; document.getElementById("print").innerHTML = data; } //--> </SCRIPT> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> <BODY> <FORM name="formA"> <input name="data" value="1"> <INPUT type="button" value="足す" onclick="nextA()"> </FORM> <FORM name="formB"> <SPAN id="print">1</SPAN> <INPUT type="button" value="足す" onclick="nextB()"> <INPUT type="hidden" name="data" value="1" > </FORM> </BODY> </HTML>
- ベストアンサー
- CGI
- エクセル フォームを開いたときにどこにもフォーカス
エクセル フォームを開いたときにどこにもフォーカスを当てたくない 図のように、UserForm1の上にTextBox1とTextBox2を設置しました。 このまま、F5を押して実行すると、 TextBox1にフォーカスが当たるのですが、 どこにもフォーカスを充てずにフォームを表示する方法はありますか？ 見えないコントロールを作って、SetFocusをそこに充てるしかないのでしょうか？
- 締切済み
- オフィス系ソフト
- window.onloadのコマンドについて
下記のソースにあるリセットボタンをクリックした時に、 フォーム内のデータを消去すると共に、window.onloadコマンドを 実行させるようにしたいと考えています。 どのように制御すればよいのか、ご教授頂ければ幸いです。 よろしくお願い致します。 ソース： ---------------------------------------------------------- <script> <!--オンロードさせ、リロード時に選択を保持--> window.onload = loadform; function loadform (){ entryChange01(); entryChange02(); entryChange03(); entryChange04(); } <!--フォームの表示／非表示の制御1--> function entryChange01(){ radio = document.getElementsByName('radio01') if(radio[0].checked) { document.getElementById('table2').style.display = "none"; document.getElementById('table3').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table2').style.display = ""; document.getElementById('table3').style.display = ""; } } <!--フォームの表示／非表示の制御2--> function entryChange02(){ radio = document.getElementsByName('radio02') if(radio[0].checked) { document.getElementById('table5').style.display = "none"; document.getElementById('table6').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table5').style.display = ""; document.getElementById('table6').style.display = ""; } } } </script> <input type="reset" value="リセット" onclick="return confirm('本当に入力内容を削除してもよろしいですか？');" />
- 締切済み
- JavaScript
お礼
ご回答いただき誠にありがとうございます。 ユーザの操作（ボタンを押すとか）に対して 返答する感じにしないとダメなんですね。 ・・・ちょっと工夫してみます。 ありがとうございます。