- ベストアンサー
画面表示時の初期フォーカスの汎用化について
すいません、、何方か知っている方がいましたらご教授下さい。 画面表示時にテキストエリアにフォーカスが当たるように <body onload="document.getElementById('ID名')"> と記述します。 しかし、当然の事ながらID名指定なので汎用化できません。 汎用的に初期フォーカスを一番初めにあるinputタグのtext属性に当てる事は可能なのでしょうか？（ID名の自動取得とか？） 場違いな質問でしたらすいません。 宜しくお願い致します。
- k_tanpin
- お礼率66% (6/9)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
関連するQ&A
- フォーカスが外れた時の入力チェックの仕方
htmlで書かれたテキストエリアのフォーカスが外れた時に、 入力チェックを行いたいのですが すでに <input type=text name=abc value=""> というinputタグが存在していて このタグに手を加えずjavascriptを使い どうにかテキストエリアabcのフォーカスが外れた時に、 入力チェックを行いたいです 要するに htmlで<input type=text name=abc value="" onblur="関数名"> っと書く事が出来ないという状況です。 全く案が思い浮かびません 何かいい案がおありでしたらよろしくお願い致します
- 締切済み
- JavaScript
- 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
- 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
- HTMLとJavascriptの汎用的な書き方について
HTMLのタグにid="namae"とすれば、Javascriptでdocument.getElementByIdを使って平面状に（すべてdocumentの下？）でアクセスできるので、 getElementByIdは便利かなと思っているのですが、 タグで name属性を使ってアクセスする場合と、 id属性でgetElementByIdでアクセスする場合の どちらが今後一般的になるのでしょうか？ nameは昔から？あったようなので、切り捨てるのも 気になりますが、記述の面で両方書くと手間なので、 id属性で一本化しても問題ないでしょうか？
- ベストアンサー
- JavaScript
- スマホでフォームにフォーカスする方法
スマホでフォームにフォーカスする方法についてです。 ページ読み込み終了時に、 特定の入力フォームに自動でフォーカスしたいのですが、 うまくいきません。 通常、PCのブラウザだと以下のようにするとフォーカスするのですが、 スマホ（iPhone等）では動作しません。 $(document).ready( function() { $("#f1").focus(); }); もしくは、 window.onload=function(){ var elem = document.getElementById("f1"); elem.focus(); } ※f1 は input の id です。 なにか回避策や対処方法はありませんでしょうか？ よろしくお願いいたします。
- ベストアンサー
- 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
- ウィンドウサイズの変更を滑らかに取得したい
<html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。
- ベストアンサー
- JavaScript
- 下記コードの実行方法について質問です。
問題のコードは下記ですが、 bodyタグに onLoad="firstFunc()" と書かずに実行したいのですが、 スマートな方法はないでしょうか？ よろしくお願いいたします。 <script type="text/javascript"> function firstFunc(){ var aFunc = document.getElementById('btn'); aFunc.onclick = function(){ alert('りんご'); } } </script> </head> <body onLoad="firstFunc()"> <button id="btn" name="ボタン">getElementByIdでonclickのイベントを追加できる。</button> </body>
- ベストアンサー
- JavaScript
- FireFoxでfocus()が上手く動かない
javascriptを使って、 フォームのテキストエリアの入力文字数をチェックし、 オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。 ようにしようとしています。 IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。 どこがまずいのか、教えてください。 コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 1) { alert('サイズオーバーです'); aText.focus(); } } //--> </script> </head> <body> <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> <input type="text" name="dummy"> </form> </body> </html>
- ベストアンサー
- JavaScript
- リンクへのフォーカスの移動の仕方
表の中にテキストを記入しそこにリンクが張ってあります。 例）TEST.html Ａ１（Ａ１.htmへのリンク) Ａ２（Ａ２.htmへのリンク） Ａ３（Ａ３.htmへのリンク） このとき、TEST.htmlを開いたときに、Ａ２と言う文字にフォーカスをあてることはできないのでしょうか？ おそらく＜body＞タグの中に onload 関数 と書いて その関数で、Ａ２にフォーカスをあてるのだと思うのですが、うまくいきません。 関数の中には document.all["A2を示すAタグのID"].Focus();と書いています。 Javascriptについてあまり知識がなく、説明も不十分かと思いますが、宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 これだと、一番初めのfrom内のinput要素にフォーカスが当たるんですね。 解決しました。