- ベストアンサー
次ページ遷移時のテキストフォーカスとスクロールについて
- 次ページ遷移時にテキストにフォーカスを当て、その場所までスクロールする方法についてご質問です。
- name属性にハイフンが含まれる場合、フォーカスの実行が失敗するため、他の名前を使用する方法を探しています。
- また、テキストにフォーカスした状態でその場所までスクロールすることは可能でしょうか。
- jipang5054
- お礼率61% (51/83)
- HTML
- 回答数5
- ありがとう数10
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- askaaska
- ベストアンサー率35% (1455/4149)
まず document.getElementsByName(goods)[0].offsetTop で値が取れているかどうか確認が必要ね ブラウザによって取れたり取れなかったりするから もしjQueryを使えるなら それを使ってtop値を取る方が確実かも
補足
ご教授ありがとうございます。 jQueryは初めてでどうすればよいか見当もつきません。 甘えてばかりで申し訳ございませんが、 top値を取る方法も教えていただけないでしょうか。 又、使用ブラウザは「GoogleChrom」ですが、IEの11だと構築した関数ではスクロールが一番下になってしまいます。 こちらは document.getElementsByName(goods)[0].offsetTop がうまく作動すれば、解決されますでしょうか。 何から何まで申し訳ございません。 納期が迫ってきてしまっていることもございますので、 本来であれば勉強なり調べるなりすることが筋でありますが、 ご協力を頂戴できればと思います。 何卒宜しくお願い申し上げます。
- askaaska
- ベストアンサー率35% (1455/4149)
関数を作って その中に処理を書いて その関数をonloadで呼べばいいわ
補足
ご連絡遅くなり申し訳ございません。 ご教授いただきました通り、頑張って関数を作成してみました。 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上で取得した引数を入れて作動しました。 最後に１点またまたご質問です。 上記関数ですと、画面の１番上に行く(window.scroll)が作動しません。 色々と試してみているのですが、不備をご指摘いただければありがたいです。 何卒宜しくお願い申し上げます。
- askaaska
- ベストアンサー率35% (1455/4149)
うまく言ってよかったの > 一番上に window.scroll(0,document.getElementsByName('fi-el-d1')[0].offsetTop); こんな風にすればその場所までスクロールするわよ > 背景色 document.getElementsByName('fi-el-d1')[0].style.backgroundColor="red"; こんな風にすれば背景色が赤くなるわ
補足
ご連絡が遅くなりました。 またまた早速のご連絡ありがとうございます。 教えていただいた方法で双方共実行の確認ができませんでした。 おそらく私がJavaScript素人の為のミスであると思われます。 今回の実行したいことは、 １）指定テキストまでスクロール ２）指定テキスト背景色の色付け ３）指定テキストフォーカス です。 こちらを <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)
１） document.getElementsByName('fi-el-d1')[0].focus() こんな風にする ２） フォーカスを当てたら 勝手に画面に入るようにスクロールするはずよ
補足
早速のご連絡大変ありがとうございました。 １）教えていただいた通りこちらでバッチリでした。 ２）画面スクロールもうまくいきました。 ありがとうございました。 続けて質問しても宜しいでしょうか。 ２）のスクロールですが、フォーカスしたテキストが画面の１番上に くるようにできたら尚良いかなと思っております。 良い方法はございませんでしょうか。 こちらはできたらで結構です。 後、続けての動作ですが、フォーカスしたテキストの背景色も同時に 変えることはできますでしょうか。 PHPで書き込んでいけば可能なのですが、シンプルにできる方法があれば 教えてください。 何卒宜しくお願い申し上げます。
お礼
ご連絡が遅くなりました。 今回は上記の方法ではなく、 window.location.hash=group; （groupは変数） を利用して、id要素へ飛ばす方法に変えました。 今回の案件ではとても勉強になりました。 大変ありがとうございました。
補足
ご連絡ありがとうございます。 アラートを出してみました。 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の引数値を変えても毎回同じアラートになります。 又、下には十分な空きスペースがあります。 記述に不備があるのでしょうか。