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

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

ただいまの
回答率

87.79%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,221

score 417

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のせいで、
フォーカスが消えてしまいます。
なので、その対処としてイベントの最後に次のコントロールにフォーカスを当てるようにしました。

protected void calc_UriageGokei1(object sender, EventArgs e)
{
    //計算
    try
    {
        var kikaku = tbx_kikakuUriage1.Text.Equals("") ? 0 : int.Parse(tbx_kikakuUriage1.Text);
        var ippan = tbx_ippanUriage1.Text.Equals("") ? 0 : int.Parse(tbx_ippanUriage1.Text);

        lbl_uriageGokei1.Text = (kikaku + ippan) + "";
    }
    catch (Exception ex)
    {
        lbl_uriageGokei1.Text = "";
    }
    calc_arari1(null, EventArgs.Empty);

    //フォーカスを次のコントロールに移す
    if (sender == null) return;
    if (sender.Equals(tbx_kikakuUriage1))
    {
        tbx_kikakuUriage2.Focus();
    }
    else
    {
        tbx_ippanUriage2.Focus();
    }
}


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

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

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

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

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • otftrough

    2018/10/26 11:04

    すみませんどうしても画像は貼れません

    キャンセル

  • SurferOnWww

    2018/10/26 11:21

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

    キャンセル

  • SurferOnWww

    2018/10/26 11:58

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

    キャンセル

回答 2

checkベストアンサー

+1

上の 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 を使わないとダメということも考えなければなりません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

これを

tbx_kikakuUriage2.Focus();


こうしたら

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


どうなりますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/28 09:51

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

    キャンセル

  • 2018/11/06 10:14

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

    キャンセル

  • 2018/11/06 11:23

    -shu- さん>
    > Textbox.Focus()と自力でjs出力では、コードも異なれば実行されるスクリプトの挿入位置も異なります。

    位置が変わるだけで、MaintainScrollPositionOnPostBack が true に設定されることにより生成されるスクリプトとの関係には影響はないから「自力で上記回答のようなスクリプトを書くのはあまり意味がない」と言っています。

    何故意味がないか、具体的には後で回答欄に追記しておきます。

    キャンセル

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

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • C#に関する質問
  • AutoPostBack=Trueでフォーカスを失うので、Focus()で対応したが、スクロールが勝手に動く