次ページ遷移時のテキストフォーカスとスクロールについて

このQ&Aのポイント
  • 次ページ遷移時にテキストにフォーカスを当て、その場所までスクロールする方法についてご質問です。
  • name属性にハイフンが含まれる場合、フォーカスの実行が失敗するため、他の名前を使用する方法を探しています。
  • また、テキストにフォーカスした状態でその場所までスクロールすることは可能でしょうか。
回答を見る
  • ベストアンサー

body onload 自動フォーカス

body onload 自動フォーカス お世話になっております。 PHP・・・ちょっとは分かる JavaScript・・・ほとんど素人 という程度の知識の者です。すみません。 次ページのテキストに自動フォーカスをするプログラムを構築しております。 諸々調べた結果、以下のコードで実行テストは成功しました。 <html> <head> </head> <body onLoad="document.form1.field1.focus()"> <form action="#" name="form1"> <p>パスワード:<input type="password" name="field1" size="25"></p> </form> </body> </html> 以下2点ご質問がございます。 1) name属性についてですが、本番プログラムでは、 name="aaa-bbb-ccc" というように、「-」が入っております。 そうすると、フォーカスの実行は失敗してしまします。 nameに「-」なしの名前をつければ問題ないのですが、 他のプログラムでも使用している名前の為、変更せずに構築することができればと考えております。 何かよい方法はございませんでしょうか。 2) 次ページに遷移した時に、テキストにフォーカスを当てるのと同時、 そのテキスト位置までスクロールすることは可能でしょうか。 同じく、<body onload=location.href='#aaa'>という形で、指定idの場所にスクロールすることはできましたが、 上記1)と組み合わせることができればと思います。 長々すみません。 要約すると、「次ページ遷移時にあるテキストをフォーカスしその場所までスクロールする」 ことが目的です。 何卒宜しくお願い申し上げます。

  • HTML
  • 回答数5
  • ありがとう数10

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

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.5

で、offsetTopの値は確認できたの? scrollの直前に alertで出力してみればいいと思うわ ちなみに、そのテキストボックスより下には 十分な空きスペースがあるのよね? 無い場合あたりまえだけど一番上にはいかないからね せいぜい真ん中止まりよ

jipang5054
質問者

お礼

ご連絡が遅くなりました。 今回は上記の方法ではなく、 window.location.hash=group; (groupは変数) を利用して、id要素へ飛ばす方法に変えました。 今回の案件ではとても勉強になりました。 大変ありがとうございました。

jipang5054
質問者

補足

ご連絡ありがとうございます。 アラートを出してみました。 function scroll_op(goods){  document.getElementsByName(goods)[0].focus();  document.getElementsByName(goods)[0].style.backgroundColor="yellow";  alert(document.getElementsByName(goods)[0].offsetTop);  window.scroll(0,document.getElementsByName(goods)[0].offsetTop); } すると、chromeでは「24」、IEでは「25」がでました。 goodsの引数値を変えても毎回同じアラートになります。 又、下には十分な空きスペースがあります。 記述に不備があるのでしょうか。

その他の回答 (4)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.4

まず document.getElementsByName(goods)[0].offsetTop で値が取れているかどうか確認が必要ね ブラウザによって取れたり取れなかったりするから もしjQueryを使えるなら それを使ってtop値を取る方が確実かも

jipang5054
質問者

補足

ご教授ありがとうございます。 jQueryは初めてでどうすればよいか見当もつきません。 甘えてばかりで申し訳ございませんが、 top値を取る方法も教えていただけないでしょうか。 又、使用ブラウザは「GoogleChrom」ですが、IEの11だと構築した関数ではスクロールが一番下になってしまいます。 こちらは document.getElementsByName(goods)[0].offsetTop がうまく作動すれば、解決されますでしょうか。 何から何まで申し訳ございません。 納期が迫ってきてしまっていることもございますので、 本来であれば勉強なり調べるなりすることが筋でありますが、 ご協力を頂戴できればと思います。 何卒宜しくお願い申し上げます。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.3

関数を作って その中に処理を書いて その関数をonloadで呼べばいいわ

jipang5054
質問者

補足

ご連絡遅くなり申し訳ございません。 ご教授いただきました通り、頑張って関数を作成してみました。 function scroll_op(goods){  document.getElementsByName(goods)[0].focus();  document.getElementsByName(goods)[0].style.backgroundColor="yellow";  window.scroll(0,document.getElementsByName(goods)[0].offsetTop); } 上記の関数をPHP上で取得した引数を入れて作動しました。 最後に1点またまたご質問です。 上記関数ですと、画面の1番上に行く(window.scroll)が作動しません。 色々と試してみているのですが、不備をご指摘いただければありがたいです。 何卒宜しくお願い申し上げます。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

うまく言ってよかったの > 一番上に window.scroll(0,document.getElementsByName('fi-el-d1')[0].offsetTop); こんな風にすればその場所までスクロールするわよ > 背景色 document.getElementsByName('fi-el-d1')[0].style.backgroundColor="red"; こんな風にすれば背景色が赤くなるわ

jipang5054
質問者

補足

ご連絡が遅くなりました。 またまた早速のご連絡ありがとうございます。 教えていただいた方法で双方共実行の確認ができませんでした。 おそらく私がJavaScript素人の為のミスであると思われます。 今回の実行したいことは、 1)指定テキストまでスクロール 2)指定テキスト背景色の色付け 3)指定テキストフォーカス です。 こちらを <body onload=""> 内ですべて実行する方法はありませんでしょうか。 実際はPHPで指定テキストを選び、echoでbodyタグを出力しております。 こんな感じです。 <php? if(substr($aaa,0,7) == "1234567"){  echo("<body onload=\"document.getElementsByName('fi-el-d1')[0].focus();\">"); }else if(substr($aaa,0,7) == "2345678"){ echo("<body onload=\"document.getElementsByName('fi-el-d2')[0].focus();\">"); } ?> 上記のコードは成功しました。 (一番最初に教えていただいた内容です。) あまりスマートな方法ではありませんが、 何卒宜しくお願い申し上げます。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

1) document.getElementsByName('fi-el-d1')[0].focus() こんな風にする 2) フォーカスを当てたら 勝手に画面に入るようにスクロールするはずよ

jipang5054
質問者

補足

早速のご連絡大変ありがとうございました。 1)教えていただいた通りこちらでバッチリでした。 2)画面スクロールもうまくいきました。 ありがとうございました。 続けて質問しても宜しいでしょうか。 2)のスクロールですが、フォーカスしたテキストが画面の1番上に くるようにできたら尚良いかなと思っております。 良い方法はございませんでしょうか。 こちらはできたらで結構です。 後、続けての動作ですが、フォーカスしたテキストの背景色も同時に 変えることはできますでしょうか。 PHPで書き込んでいけば可能なのですが、シンプルにできる方法があれば 教えてください。 何卒宜しくお願い申し上げます。

関連するQ&A

  • フォーカスする際のテキストフィールド名を変数で渡したい

    表のような入力フォームがあって、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が入っております。 そもそも変数なんて使えるのでしょうか? 変数以外の方法でも、他にアイディアがあればお願いします。 締切りが明日で非常にあせっています。 よろしくお願いいたします。

  • BODYタグのonloadについて

    こんにちは。 HTMLのBodyタグにて、onload処理を記述しているのですが、 不思議な現象が起きます。。。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript" type="text/JavaScript"> <!-- // 初期表示 function init() { alert("AAA"); var formObj = document.getElementById("starter"); alert("formObj.action = " + formObj.action); formObj.submit(); } //--> </script> </head> <body onload="init()" tabindex="-1"> Now Loading... <form method="post" name="starter" action="/getIchiran.do" > <% System.out.println("このJSPにきてますか?"); %> </form> </body> </html> 上記のように記述しているのですが、 onloadのinit関数が、呼ばれる場合と呼ばれない場合があります・・・ 呼ばれる場合と、呼ばれない場合でも 「このJSPにきてますか?」のログは表示されているので、このHTML(JSP)は呼ばれている模様です。 どうしてこうのような現象が起きるのかさっぱり分からなくて・・・ 何が悪いのか教えて頂けないでしょうか? 宜しくお願い致します。 IEは6.0、 OSはWindowsXPです。

    • ベストアンサー
    • HTML
  • textbox内の文字数を判別しfocusを移動させる

    textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、2つ目のtextboxから記入したりするとうまく動作しません。どうしたらいいのでしょうか?カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照しようとしたのですがそのような関数はあるのでしょうか?教えてください。 <html> <head><title>checkLength</title> <script language="JavaScript"> <!-- document.onkeyup=checkLength; function checkLength() { if(document.form1.text1.value.length==3) document.form1.text2.focus(); if(document.form1.text2.value.length==5) document.form1.text3.focus(); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1">半角英数で入力してください。<br> 1...<input type="text" name="text1" size="7"> 3文字入力するとカーソル移動<br> 2...<input type="text" name="text2" size="7"> 5文字入力するとカーソル移動<br> 3...<input type="text" name="text3" size="7"> </form> </body> </html>

  • フォーカスの移動

    どうしてもわからないので、教えて下さい。 下の option ボタンのいずれかを選択した際に、 自動的にテキストボックスにフォーカスが移るような スクリプトを書きたいのですが、 スクリプトの内容と、htmlにへの組み込み方を どのように実装してよいかわかりません。 ------------------------------------- <html> <title></title> <head> <script language="JavaScript"> //フォカース移動 function moveFocus() { //???? } </script> </head> <body> <form name="myForm"> <select name="mySelect"> <option name="op1">test1</option> <option name="op2">test2</option> </select> <input type="text" name="myText"></input> </form> </body> </html>

  • 複数のテキストフィールドを同時にfocusする

    ブラウザの仕様から考えてもダメもとですが。。。 JavaScriptで1ページに複数あるテキストフィールドを同時にfocusまたは入力値を選択状態する方法はありませんか?JavaScript以外でも構いません。 ちなみに、テキストフィールドのname属性が同じ場合です。 【例】 <form name="form1"> <input type="text" name="qqq" size="30"> </form> <form name="form2"> <input type="text" name="qqq" size="30"> </form>

  • テキストボックスへの引数によるフォーカスの設定

    こんにちは。 ASP.NET(VB)でサイトを作っています。 ページを表示した時にテキストボックスにフォーカスを設定したいと思っています。 ネットなどで検索していましたら<body onLoad="document.Form.textbox.focus()"> とすれば出来るようなので、実際に設定してみましたら、「'document.form.LoginID'はNullまたはオブジェクトではありません」というエラーが出てしまいます。 どうすればASPのコントロールにフォーカスを設定できますか?

  • テキストエリアに入力したURLにアクセス

    タイトルのとおりなのですが、formタグ内のtextとbuttonを使った遷移をしたいのですがどうすればいいでしょうか。 例えば以下のサイトを考えます。 ​http://aaa.com​ そしてテキストフィールドにabcと入力すると​http://aaa.com/abc​に遷移 また、テキストフィールドにqweと入力すると​http://aaa.com/qwe​に遷移 こういった遷移は可能なのでしょうか? formのactionに指定してあげたいのですが、うまく想像ができません。 http://aaa.com/?word=abcのようなページではなく http://aaa.com/abc のように遷移したいのです。 JavaScriptを使うと思い調べているのですが、よいページが見つかりません。 どなたかご教授ください。。

  • フォーカスが外れたときの動作について

    お世話になります。 あるテキストフィールド(text1)をクリックした際に隠れている別のテキストフィールド(text2)を表示し、 フォーカスが外れるとtext2を再度隠すというコードを書きました。 <html> <head> <style> <!-- #text2 { display: none; } --> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function() { $("#text1").click(function() { $("#text2").show(); }).blur(function() { $("#text2").hide(); }); }); --> </script> </head> <body> <form> <input type="text" id="text1" value=""/> <input type="text" id="text2" value=""/> </form> </body> </html> この場合、text1をクリックしたときにtext2が表示されて、フォーカスが外れるとtext2が隠れるのは想定通りの動作なのですが、これをtext2をクリックした場合にはtext1からフォーカスが外れてもtext2を表示したままということはできるのでしょうか。 blurの中でtext2がクリックされた時みたいな検知ができれば実現できると思うのですがそのようなことってできますでしょうか。 よろしくお願いいたします。

  • 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>

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

    複数あるテキストエリア間を、enterキーでフォーカス移動をしたいです。 以下のようにしましたが、2つめのテキストエリアへフォーカス移動すると、改行が入力され、カーソルが2行目へ移動してしまいます。 enterキーを押しているのでこうなってしまうと思うのですが、 カーソルが1行目へ移動するようにするには、どうしたらいいでしょうか? フォーカス移動後に改行コードがあったら、""に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>