C# と VB.NET の質問掲示板

わんくま同盟

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

ツリー一括表示

動的コントロールのカーソルセット(その2) /passop (18/04/13(Fri) 11:30) #87118
Re[1]: 動的コントロールのカーソルセット(その2) /WebSurfer (18/04/13(Fri) 13:06) #87119
  └ Re[2]: 動的コントロールのカーソルセット(その2) /passop (18/04/13(Fri) 13:44) #87120
    └ Re[3]: 動的コントロールのカーソルセット(その2) /WebSurfer (18/04/13(Fri) 14:23) #87122
      └ Re[4]: 動的コントロールのカーソルセット(その2) /passop (18/04/13(Fri) 18:29) #87132
        └ Re[5]: 動的コントロールのカーソルセット(その2) /WebSurfer (18/04/13(Fri) 19:01) #87133
          └ Re[6]: 動的コントロールのカーソルセット(その2) /passop (18/04/14(Sat) 09:35) #87136 解決済み


親記事 / ▼[ 87119 ]
■87118 / 親階層)  動的コントロールのカーソルセット(その2)
□投稿者/ passop (7回)-(2018/04/13(Fri) 11:30:03)

分類:[ASP.NET (VB)] 

2018/04/13(Fri) 12:49:09 編集(投稿者)
以前、こちらに以下の質問をさせて頂きました件で
カーソル動作の改善をしたいと考えております。

http://bbs.wankuma.com/index.cgi?mode=al2&namber=86861

こちらの解決策にありますように
PageRequestManager のイベントの処理を追加することにより、
ポストバックが発生した動的コントロールにフォーカスをセットして、
カーソルが戻るようになりましたが、もう少しカーソルな動きを
自然にしようと思っています。

そこで、TABキーを入力することによって、
次の動的コントールにカーソルを移動しようと変更しましたが、
TABキー以外を入力でも次のコントールにカーソルが移動してしまいます。

どのようにすればTABキーを入力したときのみ
次のコントールにカーソルが移動するようになるのでしょうか?

申し訳ありませんが、教えてください。

(VB.NET側コード)
   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'ポストバックの場合
        'ページ内のTableコントロールからデータセットを作成
        If IsPostBack Then
            TextBoxButtonMaking(Table1, 1)
        End If
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Me.TextBoxButtonMaking(Table1, 1)

    End Sub

    '//////// 動的コントロール作成ルーチン /////
    Private Sub TextBoxButtonMaking(ByVal tTable As Table, ByVal No As Integer)
        '行数
        Dim rowCnt As Integer = 3
        '列数
        Dim colCnt As Integer = 3

        If tTable.Rows.Count > 0 Then
            Exit Sub
        End If

        For j = 1 To rowCnt
            Dim tRow As New TableRow()
            For i As Integer = 1 To colCnt
                AddCellCreate(tRow, j, i, No)
            Next i
            'テーブルに新しい行を追加
            tTable.Rows.Add(tRow)

        Next j

    End Sub

    Private Sub AddCellCreate(ByVal tRow As TableRow, ByVal rowCtr As Integer, ByVal cellCtr As Integer, ByVal TableNo As Integer)

        Dim prodID As String = ""
        'IDを作成

        prodID = TableNo.ToString & "_" & rowCtr & "_" & cellCtr

        Dim tCell As New TableCell()
        tCell.HorizontalAlign = HorizontalAlign.Center
        tCell.Wrap = False
        tCell.ViewStateMode = UI.ViewStateMode.Enabled
        'TextBoxコを作成
        Dim ctrl As New TextBox
        ctrl.ID = "txt" & prodID
        ctrl.Text = ctrl.ID
        ctrl.AutoPostBack = True
        ctrl.EnableViewState = True
 
        'セルに追加
        tCell.Controls.Add(ctrl)
        '行に新しいセルを追加
        tRow.Cells.Add(tCell)

    End Sub


(JavaScript側コード)
<script type="text/javascript">
    var manager;
    var postBackElementId;

    function pageLoad(sender, args) {
        if (args.get_isPartialLoad() === false) {
            manager = Sys.WebForms.PageRequestManager.getInstance();
            manager.add_initializeRequest(OnInitializeRequest);
            manager.add_pageLoaded(OnPageLoaded);
        }
    }

    function OnInitializeRequest(sender, args) {
        postBackElementId = args.get_postBackElement().id;
    }

    function OnPageLoaded(sender, args) {
        if (postBackElementId) {
            var es = document.getElementsByTagName('*');

            for (var i = 0; i < es.length; i++) {
                if (es[i].id == postBackElementId) {
                    setNextFocus(es, i);
                }
            }

        }
    }

    function setNextFocus(es, cur_pos) {
        for (var i = cur_pos + 1; i < es.length; i++) {
            var elem = document.getElementById(es[i].id);
            if (elem != null) {
                elem.focus();
                break;
            }
        }
    }

</script>

[ □ Tree ] 返信 編集キー/

▲[ 87118 ] / ▼[ 87120 ]
■87119 / 1階層)  Re[1]: 動的コントロールのカーソルセット(その2)
□投稿者/ WebSurfer (1471回)-(2018/04/13(Fri) 13:06:19)
No87118 (passop さん) に返信

> そこで、TABキーを入力することによって、
> 次の動的コントールにカーソルを移動しようと変更しましたが、
> TABキー以外を入力でも次のコントールにカーソルが移動してしまいます。

何をしたいのか理解できません。

Tab キーを押すとフォーカスが移動するのは、何もしなくても(クライアントスクリプトは一切何も書かなくても)、
ブラウザの普通の動きとしてそうなるのですが。

それとは異なる動きをさせたいということですか? であれば、それは具体的にどういう動きなのですか?
[ 親 87118 / □ Tree ] 返信 編集キー/

▲[ 87119 ] / ▼[ 87122 ]
■87120 / 2階層)  Re[2]: 動的コントロールのカーソルセット(その2)
□投稿者/ passop (8回)-(2018/04/13(Fri) 13:44:21)
No87119 (WebSurfer さん) に返信

> 何をしたいのか理解できません。
>
> Tab キーを押すとフォーカスが移動するのは、何もしなくても(クライアントスクリプトは一切何も書かなくても)、
> ブラウザの普通の動きとしてそうなるのですが。
>
> それとは異なる動きをさせたいということですか? であれば、それは具体的にどういう動きなのですか?

説明がヘタで申し訳ありません。

現状のプログラムを実行した場合、以下のように3行3列の表形式にテキストボックスが表示されます。

┌─┬─┬─┐
|@│A│B│
├─┼─┼─┤
|C│D│E│
├─┼─┼─┤
|F│G│H│
└─┴─┴─┘

まず、最初に@にカーソルがあるとします。

TABキーを入力すると以下のようにカーソルが移動します。

@→A→B→C→D→E→F→G→H

ところが、@のテキストボックスの内容を変更した場合、現在、前回の動作では@にカーソルが戻ってしまいます。

@のテキストボックスの内容を変更して、TABキーを入力した場合はAにカーソルを移動したいと考えています。

今回のようにプログラムを変更することで、Aにカーソルを移動するようになりましたが、
TABキーの入力以外、例えばマウスで他のコントールにカーソルを持っていこうとしてもAにカーソルが戻ってしまいます。

@のテキストボックスの内容を変更して、TABキーを入力したときだけ、
Aにカーソル移動するにはどのようにすれば良いかわからなかったので、質問しました。

[ 親 87118 / □ Tree ] 返信 編集キー/

▲[ 87120 ] / ▼[ 87132 ]
■87122 / 3階層)  Re[3]: 動的コントロールのカーソルセット(その2)
□投稿者/ WebSurfer (1472回)-(2018/04/13(Fri) 14:23:44)
No87120 (passop さん) に返信

> @のテキストボックスの内容を変更して、TABキーを入力したときだけ、
> Aにカーソル移動するにはどのようにすれば良いかわからなかったので、質問しました。

TextBox コントロールの AutoPostBack を true に設定した場合、ユーザーがテキストボックスの入力を変更して
フォーカスを外すとポストバックされるようになりますが、「TABキーを入力」でもフォーカスが外れるというこ
とは知った上でそういう質問をしていますか?

先のスレッドでは、その時のポストバックのトリガとなったテキストボックスに、非同期ポストバックの応答化
が返って時にクライアントスクリプトでフォーカスを当てようという話だったはずです。

なので、先に行ったことと今考えていることが矛盾しているような気がしますが?

フォーカスが外れたのが Tab キーを押したためかそれ以外かを判定してフォーカスを当てる先を変えるということ
になるかと思いますが、すみませんが、それをどう実装するかを考える気力がないです(少なくとも今は)。

[ 親 87118 / □ Tree ] 返信 編集キー/

▲[ 87122 ] / ▼[ 87133 ]
■87132 / 4階層)  Re[4]: 動的コントロールのカーソルセット(その2)
□投稿者/ passop (9回)-(2018/04/13(Fri) 18:29:52)
No87122 (WebSurfer さん) に返信
>「TABキーを入力」でもフォーカスが外れるというこ
>とは知った上でそういう質問をしていますか?

はい、存じております。

テキストボックスの入力を変更してフォーカスを外したときにポストバックをしたいのは理由がありまして、
テキストボックスの値が変更されたときに他のテキストボックスに計算値果等の値をセットしたいからです。


>先のスレッドでは、その時のポストバックのトリガとなったテキストボックスに、非同期ポストバックの応答化
>が返って時にクライアントスクリプトでフォーカスを当てようという話だったはずです。
>
>なので、先に行ったことと今考えていることが矛盾しているような気がしますが?

先のスレッドではトリガの元となったテキストボックスにフォーカスを当てる程度でいいと考えていたのですが、
出来れば、もう少しカーソルの動きを自然な動きにしたい思ったからです。

[ 親 87118 / □ Tree ] 返信 編集キー/

▲[ 87132 ] / ▼[ 87136 ]
■87133 / 5階層)  Re[5]: 動的コントロールのカーソルセット(その2)
□投稿者/ WebSurfer (1473回)-(2018/04/13(Fri) 19:01:20)
No87132 (passop さん) に返信

> テキストボックスの入力を変更してフォーカスを外したときにポストバックをしたいのは理由がありまして、
> テキストボックスの値が変更されたときに他のテキストボックスに計算値果等の値をセットしたいからです。

全部クライアントスクリプトで、サーバー側の情報が必要なら jQuery ajax などで問い合わせて処置すること
を検討した方がよさそうな気がします。
[ 親 87118 / □ Tree ] 返信 編集キー/

▲[ 87133 ] / 返信無し
■87136 / 6階層)  Re[6]: 動的コントロールのカーソルセット(その2)
□投稿者/ passop (10回)-(2018/04/14(Sat) 09:35:15)
2018/04/14(Sat) 15:27:19 編集(投稿者)

No87133 (WebSurfer さん) に返信
>
> 全部クライアントスクリプトで、サーバー側の情報が必要なら jQuery ajax などで問い合わせて処置すること
> を検討した方がよさそうな気がします。

この件に関しては仕様も含めて、再検討します。

また、何かありましたら、質問させて頂きますのでよろしくお願いします。

解決済み
[ 親 87118 / □ Tree ] 返信 編集キー/


管理者用

- Child Tree -