質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

2回答

4905閲覧

AutoPostBack=Trueでフォーカスを失うので、Focus()で対応したが、スクロールが勝手に動く

otftrough

総合スコア476

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2018/10/25 05:46

編集2018/10/26 02:17

ASP.NETを始めて初めて作るサイトです。
<asp:TextBox ID="tbx_kikakuUriage1" runat="server" CssClass="txt-center" MaxLength="5" Width="70%" OnTextChanged="calc_UriageGokei1" AutoPostBack="true"></asp:TextBox>
上記のコントロールは、TextChangedイベントで売上の合計を計算するものですが、AutoPostBackのせいで、
フォーカスが消えてしまいます。
なので、その対処としてイベントの最後に次のコントロールにフォーカスを当てるようにしました。

C#

1protected void calc_UriageGokei1(object sender, EventArgs e) 2{ 3 //計算 4 try 5 { 6 var kikaku = tbx_kikakuUriage1.Text.Equals("") ? 0 : int.Parse(tbx_kikakuUriage1.Text); 7 var ippan = tbx_ippanUriage1.Text.Equals("") ? 0 : int.Parse(tbx_ippanUriage1.Text); 8 9 lbl_uriageGokei1.Text = (kikaku + ippan) + ""; 10 } 11 catch (Exception ex) 12 { 13 lbl_uriageGokei1.Text = ""; 14 } 15 calc_arari1(null, EventArgs.Empty); 16 17 //フォーカスを次のコントロールに移す 18 if (sender == null) return; 19 if (sender.Equals(tbx_kikakuUriage1)) 20 { 21 tbx_kikakuUriage2.Focus(); 22 } 23 else 24 { 25 tbx_ippanUriage2.Focus(); 26 } 27}

すると、フォーカスが当たったコントロールがページの一番下に表示される場所までスクロールが移動してしまいます。

どうすれば、スクロールが動かずにフォーカスだけ次に移すことが出来るのでしょうか。

追記
開発環境
Win7 Pro 64bit
VS2013 Pro
Chrome 最新版
他のブラウザでも同様の現象
Focus()が原因でスクロールが起こっているので、ポストバックのせいで一番上に戻る現象とは違うと思います。

MaintainScrollPositionOnPostBackはtrueになっています。
ポストバックではスクロール位置は変わりません。
今回の足し算の部分では、確かにクライアント側でJSに計算させる方法でも問題ありませんが、
別の場所でも同じ現象が起きていて、それらはポストバックが必要な処理です。

TextChangedイベントで計算を行うところまでは問題ありませんが、
最後の.Focus()の時にスクロールが移動し、コントロールが画面の一番下まで移動します。

VSのプロジェクトのプロパティを見ると、
対象のフレームワーク ... .NET Framework 4
となっておりますが、これが.NETのバージョンですか?

IISのバージョンは調べ方がわかりません。

実際の画面は貼れないのですが、イメージはこんな感じです。
画面スクロールイメージ

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/10/25 06:27

開発環境(OS, .NET, IIS, Visual Studio のバージョン、使っているブラウザ)ぐらいは書きましょうよ。ASP.NET Web Forms アプリには MaintainScrollPositionOnPostBack プロパティというものがあって、ポストバック前後で上下左右のスクロール位置を維持できる仕組みが用意されています。ただし、ASP.NET 2.0, 3.0, 3.5 でブラウザに Safari, Chrome を使用した場合は動きません・・・ということがあるんですよ。
退会済みユーザー

退会済みユーザー

2018/10/25 06:40

.NET, IIS のバージョンは書いてもらえないのですか?
退会済みユーザー

退会済みユーザー

2018/10/25 06:48 編集

MaintainScrollPositionOnPostBack プロパティは設定してない(デフォルト)状態ということでいいのですか? その状態でポストバックすると再描画されたときにはページの一番上から表示される。しかし、フォーカスを操作するコードを入れるとフォーカスが当たったコントロールが表示されるまでスクロールアップされるということですか? 画像をアップできませんか? calc_arari1(null, EventArgs.Empty); というメソッドが定義不明ですが何ですか?
退会済みユーザー

退会済みユーザー

2018/10/25 06:51

質問の内容とは離れてしまいますが・・・ 足し算してその結果を表示するだけならわざわざポストバックしてサーバー側のリソースを使う必要はなく、クライアントスクリプトで行った方が良いと思いますが、そうしない理由があるのですか?
退会済みユーザー

退会済みユーザー

2018/10/25 11:16

フォーカスされた要素を表示する(必要ならスクロールして)というのはブラウザの機能のようです。Tab キーでフォーカスを移動させていって、画面に表示されてない要素にフォーカスを移したときスクロールされますが、それと同じ状況になっているのではないでしょうか? とすると、そもそもできないことかもしれませんね。
退会済みユーザー

退会済みユーザー

2018/10/25 11:18

コメントに対応して質問内容を変更したのであれば、その旨コメント欄に書いてください。でないと気が付きません。
退会済みユーザー

退会済みユーザー

2018/10/25 11:21

.NET, IIS のバージョンは書いてもらえないのですか? 無視ですか? 無視には無視で対応しますよ。
otftrough

2018/10/26 01:23

コメント欄とはここのことですか?質問者がここに書いて良いのでしょうか?すみません、昨日の20時台は別の仕事をしていたのでteratail見てませんでした。ブラウザの機能だというのは理解しました。しかし、既に画面上に表示されている項目にフォーカスを移しているのにそれが画面の下まで移動してしまうのはどういうことでしょうか。
退会済みユーザー

退会済みユーザー

2018/10/26 01:55 編集

> 質問者がここに書いて良いのでしょうか? ← 他のスレッドでも多々そのような例を見ますし問題ないと思っていますが。もし、Teratail のルールとしてそう言うものがあれば、私が無知だったということで、すみません。
otftrough

2018/10/26 02:01

そうなんですね。最近他の質問を見ることがなかったので知りませんでした。
退会済みユーザー

退会済みユーザー

2018/10/26 02:02

> 既に画面上に表示されている項目にフォーカスを移しているのにそれが画面の下まで移動してしまう ← イメージが沸かないです。前にもお願いしましたが、画像を質問欄に貼って説明していただけませんか?
otftrough

2018/10/26 02:04

すみませんどうしても画像は貼れません
退会済みユーザー

退会済みユーザー

2018/10/26 02:21

では、今のコードを問題が再現できる必要最低限になるまでどんどん削っていくということはできないでしょうか? その過程で問題がどこにあるか切る分けることができ、原因が分かって自己解決できるということが多いです。自己解決できなくても、その必要最低限かつコピペすれば動くのコードをアップしてもらえると、回答者・閲覧者の方でも問題が再現できて、今より適切なレスが期待できると思います。
退会済みユーザー

退会済みユーザー

2018/10/26 02:58

質問にアップしていただいた画像を拝見。イメージがつかめました。MaintainScrollPositionOnPostBack は true になっているとのことで、その機能とフォーカスを当てることの不整合と言うか競合のようなものがあるように思えます(単なる想像です)。MaintainScrollPositionOnPostBack の仕組みは http://surferonwww.info/BlogEngine/post/2016/01/11/enable-maintainscrollpositiononpostback-on-chrome-and-safari.aspx となっており、これを考慮して原因を探り、対応策を考えるということになると思いますが、現時点では自分は no idea です。
guest

回答2

0

ベストアンサー

上の 2018/10/26 11:58 の私のコメントに、

MaintainScrollPositionOnPostBack は true になっているとのことで、その機能とフォーカスを当てることの不整合と言うか競合のようなものがあるように思えます(単なる想像です)。

と書きましたが、調べてみるとその想像が間違っていたので訂正の意味で以下に書いておきます。

まず、MaintainScrollPositionOnPostBack の機能と C# のコードでフォーカスを当てることには不整合・競合は生じません。

クライアント側のスクリプトで目的の要素にフォーカスが当たってからスクロールするという動きになるので期待通りの結果になります。

質問の画像のような結果になるとすると考えられる理由は:

(1) MaintainScrollPositionOnPostBack が設定してない(デフォルトで false)

(2) MaintainScrollPositionOnPostBack が動いてない(true にしても動かない場合がある)

それ例外の原因があるかもしれないが、あるとすると質問者さん独自の実装の問題。質問のコメントに書いたように「今のコードを問題が再現できる必要最低限になるまでどんどん削っていく」というようにして自分で調べてもらう他なさそう。

【2018/11/06 11:37 追記】

下の 2018/11/06 11:23 の -shu- さんへの私のコメントで「具体的には後で回答欄に追記しておきます」と書きましたが、それを追記しておきます。

以下のコードは、MaintainScrollPositionOnPostBack="true" の条件で、C# 側のコードで TextBox.Focus() とした場合と、RegisterStartupScript メソッドでフォーカスを当てるためのスクリプトを追加した場合、レンダリングされる html ソースの違いです。

TextBox.Focus()

・・・前略・・・ <script type="text/javascript"> //<![CDATA[ theForm.oldSubmit = theForm.submit; theForm.submit = WebForm_SaveScrollPositionSubmit; theForm.oldOnSubmit = theForm.onsubmit; theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit; theForm.oldOnLoad = window.onload; window.onload = WebForm_RestoreScrollPosition; WebForm_AutoFocus('MainContent_TextBox2');//]]> </script> </form> </body> </html>

RegisterStartupScript メソッド使用

・・・前略・・・ <script type="text/javascript"> //<![CDATA[ document.getElementById('MainContent_TextBox2').focus(); theForm.oldSubmit = theForm.submit; theForm.submit = WebForm_SaveScrollPositionSubmit; theForm.oldOnSubmit = theForm.onsubmit; theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit; theForm.oldOnLoad = window.onload; window.onload = WebForm_RestoreScrollPosition; //]]> </script> </form> </body> </html>

いずれもフォーカスが当てってから、window.onload = WebForm_RestoreScrollPosition; でスクロールされます。

動きとしてはどちらも同じです。「自力で上記回答のようなスクリプトを書くのはあまり意味がない」というか、逆に手間が増えるし、質問者さんに指摘されたように ClientID を使わないとダメということも考えなければなりません。

投稿2018/10/28 00:48

編集2018/11/06 03:42
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

これを

tbx_kikakuUriage2.Focus();

こうしたら

this.ClientScript.RegisterStartupScript(this.GetType(), "focus", "document.getElementById('tbx_kikakuUriage2').focus();", true);

どうなりますか?

投稿2018/10/26 05:18

-shu-

総合スコア37

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otftrough

2018/10/26 06:33

ClientScript.RegisterStartupScriptについて勉強して、いろいろ試してみましたが、JavaScriptが実行されていなさそうです。
-shu-

2018/10/26 08:37

そうですか。 [サーバーコントロール].focus()と、私が提示したコードでは 実際に出力されるHTMLは異なるため、それの確認でした。
otftrough

2018/10/26 08:39

ちなみに、下記のように書きました。 this.ClientScript.RegisterStartupScript(this.GetType(), "focus", "document.getElementById('" + tbx_kikakuUriage2.ClientID + "').focus();", true);
-shu-

2018/10/26 08:43

私が提示したソースでは動作しなかったため、そのように編集されたということでしょうか?
otftrough

2018/10/26 08:56

はい、提示していただいたソースを含めて何パターンか試しました。 また、JavaScriptを実行する方法も、いくつか調べながら試してみました。 今回の場合、JavaScriptをページに表示させてもAutoPostBackの際にそこを通らないみたいで、 すべて失敗しました。
-shu-

2018/10/26 16:09

通らないのであれば、取り敢えず通るようにコードを一時的に直して頂いて、私の提示したコードで動作が変わるか確認してみてはどうでしょうか?
otftrough

2018/10/27 05:41

いえ、JavaScriptが実行されていないという意味でして、ClientScript.RegisterStartupScript()自体は実行されています。 ページ上にJavaScriptを書き込むことは出来ますが、ページ全体が再読込みされないとそのコードが実行されないので、AutoPostBackで対象のコントロールだけ読み込んでいるのでは、JavaScriptはただ表示されるだけとう状態になってしまっているんだと思います。
退会済みユーザー

退会済みユーザー

2018/10/28 00:51

-shu- さん> C# のコードで TextBox.Focus() とすると、html ソースにどのようなスクリプトがレンダリングされるか調べてみることをお勧めします。自力で上記回答のようなスクリプトを書くのはあまり意味がないことが分かると思います。
-shu-

2018/11/06 01:14

SurferOnWwwさん、レンダリングは承知しています。そしてTextbox.Focus()と自力でjs出力では、コードも異なれば実行されるスクリプトの挿入位置も異なります。ぜひ確認してみてください。
退会済みユーザー

退会済みユーザー

2018/11/06 02:23

-shu- さん> > Textbox.Focus()と自力でjs出力では、コードも異なれば実行されるスクリプトの挿入位置も異なります。 位置が変わるだけで、MaintainScrollPositionOnPostBack が true に設定されることにより生成されるスクリプトとの関係には影響はないから「自力で上記回答のようなスクリプトを書くのはあまり意味がない」と言っています。 何故意味がないか、具体的には後で回答欄に追記しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問