none
EnterKeyで次のテキストボックスへ移動ができない RRS feed

  • 質問

  • お世話になります、今更なのですがEnterKeyで次のテキストボックスへ移動したいのですが

    以下、処理では日付テキストボックス入力後EnterKeyで登録ボタンがクリックされてしまいます。

    1.はじめに、起動時に「日付」にフォーカスしたい。

    2.「日付」 Enterkey後、「都道府県コード」へフォーカスしたい。

    3.「都道府県コード」 Enterkey後、「都道府県名」表示し「登録」ボタンへ。

    どうかよろしくお願い致します。

    <head runat="server">    <title>無題のページ</title>

    <script language="javascript" type="text/javascript">
            function ChgKeyCode() {
                    if (!(event.srcElement.type == "button" || event.srcElement.type == "submit")) {
                        if (event.keyCode == 13) {
                            event.keyCode = 9;
                        }
                    }
                }
    </script>

    </head>

    <body onKeyDown="ChgKeyCode">
        <form id="form1" runat="server">
        <div>
            入力</span><br />
            日付    <asp:TextBox ID="TextBox1" runat="server" Height="20px" Width="67px" TabIndex="0"></asp:TextBox>
            都道府県コード    <asp:TextBox ID="TextBox2" runat="server" Height="20px" Width="81px" TabIndex="1"></asp:TextBox>
            <asp:FormView ID="FormView2" runat="server" DataSourceID="SqlDataSource2">
                <EditItemTemplate>
                    都道府県名: <asp:TextBox ID="kanji_nmTextBox" runat="server" Text='<%# Bind("Ken_nm") %>'>
                    </asp:TextBox><br />
                    <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                        Text="更新">
                    </asp:LinkButton>
                    <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                        Text="キャンセル">
                    </asp:LinkButton>
                </EditItemTemplate>
                <InsertItemTemplate>
                    都道府県名:
                    <asp:TextBox ID="kanji_nmTextBox" runat="server" Text='<%# Bind("kanji_nm") %>'>
                    </asp:TextBox><br />
                    <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
                        Text="挿入">
                    </asp:LinkButton>
                    <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                        Text="キャンセル">
                    </asp:LinkButton>
                </InsertItemTemplate>
                <ItemTemplate>
                    都道府県名:
                    <asp:Label ID="kanji_nmLabel" runat="server" Text='<%# Bind("kanji_nm") %>'></asp:Label><br />
                </ItemTemplate>
            </asp:FormView>
            &nbsp;<asp:Button ID="Button1" runat="server" Height="28px" Text="登録" Width="100px" TabIndex="12" />
                        <asp:Button ID="Button2" runat="server" Height="27px" Text="クリア" Width="99px" />

           <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:daihatsu %>"
                ProviderName="<%$ ConnectionStrings:Kanri.ProviderName %>" SelectCommand="SELECT [kanji_nm] FROM [chimei] WHERE ([cd] = ?)">
                <SelectParameters>
                    <asp:ControlParameter ControlID="TextBox2" Name="as_cd" PropertyName="Text" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>
            </div>
            
        </form>
    </body>

    2012年5月15日 0:10

回答

  • かるあさんが対応してたのに横やりすみません。
    でも、GridView内とかDetailViewとかに配置された
    テキストとかはコントロールぶん回しじゃ抽出できないなーと思って…。

    質問者にいっこだけ。
    ASP側(~.vb)でIDが「TextBox2」だったとしても
    クライアント(javascript)では「TextBox2」ってIDにはならないですよ…;;。

    1.はじめに、起動時に「日付」にフォーカスしたい。
    →「ASP.NET フォーカス」でグーグル検索。一発で見つかる。
     これからは質問前に検索しましょう。そのほうが早いです。

    2.以降
    以下をHTML文書で保管し、動きをみる。
    そして理解してあなたのソースへ反映させる。
    ちなみに、ボタンでEnter押下したとき、クリックキャンセルするようにしてますが
    同じように書いても、submitボタンはキャンセルできませんのであしからず。
    んで、どうせ「テキスト全選択状態でフォーカス移動したいんです」って
    要望が来ると予測してそれも組み込んどきました。


    <head runat="server">
    <title>無題のページ</title>

    <script language="javascript" type="text/javascript">


            function ChgKeyCode() {
                if (event.keyCode == 13) {  //押下キーがEnterの場合
                    if ((event.srcElement.type == 'button') || (event.srcElement.type == 'submit')) {
    alert('ボタンよっ!!!');
                        return false;
                    }
                    else {
                        //その他エレメントはタブ押下にすり替える
                        event.keyCode = 9;
                    }
                }
                return true;
            }

    function focus_set(ctrl_id) {

        var obj = document.getElementById(ctrl_id);
        if (obj == null) { return; }

        if ( obj.disabled == false ) {
            obj.focus();

            //テキスト入力ボックスだったら、value値を選択状態にする。
            if ( (obj.type == 'text') || (obj.type == 'textarea') ) {
                obj.select();
            }
        }

    }

    </script>

    </head>

    <body onKeyDown="ChgKeyCode()">
        <form id="form1" runat="server">
    <div>
    <input type="submit" tabindex="5" value="送信" />
    <input type="button" tabindex="4" value="ボタン" />
    <input type="text" name="name1" id="name1" size="30" maxlength="20" tabindex="3" value="あいうえお" />
    <input type="text" name="name2" id="name2"size="30" maxlength="20" tabindex="2" value="かきくけこ" />
    <input type="text" name="name3" id="name3"size="30" maxlength="20" tabindex="1" value="さしすせそ" />
    </div>
           
    <script language='javascript'>
      <!--
        focus_set('name3');
      -->
    </script>

        </form>

    </body>

    • 回答としてマーク pythonk 2012年5月15日 8:23
    2012年5月15日 6:47
  • かるあさんが対応してたのに横やりすみません。
    でも、GridView内とかDetailViewとかに配置された
    テキストとかはコントロールぶん回しじゃ抽出できないなーと思って…。

    あっ、確かに。。。ご指摘ありがとうございます。

    各input要素毎にonkeydownイベントを設定していけばいいと思いますよっていうのはこんなイメージです。

    onkeydownはサーバーイベントが無いので直接書いても、そのまま出力されるはずです。

    <asp:FormView runat="server" ID="FormView1">
        <ItemTemplate>
            <asp:TextBox runat="server" ID="TextBox1" Text='<%# Eval("Text1") %>' onkeydown="ChgKeyCode()" />
            <asp:TextBox runat="server" ID="TextBox2" Text='<%# Eval("Text2") %>' onkeydown="ChgKeyCode()" />
        </ItemTemplate>
        <EditItemTemplate>
            <asp:TextBox runat="server" ID="TextBox1" Text='<%# Eval("Text1") %>' onkeydown="ChgKeyCode()" />
            <asp:TextBox runat="server" ID="TextBox2" Text='<%# Eval("Text2") %>' onkeydown="ChgKeyCode()" />
        </EditItemTemplate>
    </asp:FormView>
    

    • 回答としてマーク pythonk 2012年5月15日 8:23
    2012年5月15日 8:01

すべての返信

  • お世話になります、今更なのですがEnterKeyで次のテキストボックスへ移動したいのですが

    以下、処理では日付テキストボックス入力後EnterKeyで登録ボタンがクリックされてしまいます。

    1.はじめに、起動時に「日付」にフォーカスしたい。

    2.「日付」 Enterkey後、「都道府県コード」へフォーカスしたい。

    3.「都道府県コード」 Enterkey後、「都道府県名」表示し「登録」ボタンへ。

    なんか、いろいろ質問がありそうですが、ここでは最初のエンターキーでの移動に関してだけ。

    フォーム要素そのものに対してイベント設定をしないとダメだと思います(ここでは日付と都道府県コード?)。

    ただソースを見る限り、ページのすべてのinput要素に対してバインドしてあげればよさそうなので、jQueryを使ってこんな感じでバインドすると楽な気がします。

    $(function(){
        $("input[type='text']").live("keydown", function(e) {
          if (event.keyCode == 13) event.keyCode = 9;
        });
        $("#日付").focus();
    });

    #おそらく考慮済みだとは思いますが、ブラウザー環境でエンターキーで次項目に移動というインターフェイスは一般的ではありませんので、本当に必要か議論したほうが良いと思います。

    2012年5月15日 2:10
  • 早速ご返答、ありがとうございます。

    jQueryは使ったことがないので、できれば何も環境設定しないで

    開発ツールはVisual Studioで開発でき、Ajax等も使いたくないのですが。

    お願いできますでしょうか。

    2012年5月15日 2:46
  • 使わないのであれば、各input要素毎にonkeydownイベントを設定していけばいいと思いますよ。

    サーバー側で、ページのControlsをループさせて、AttributeAddでonKeydownを追加していくってのもありです。テキストボックだけでいいならこんな感じ?

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            For Each txt In Controls.OfType(Of TextBox)()
                txt.Attributes.Add("onkeydown", "Javascriptのメソッド名")
            Next
        End Sub
    2012年5月15日 3:16
  • ありがとうございます。

    汎用性はなくても構いませんが かるあさんコード一見簡単そうで私には

    少し難しく、申し訳ありませんがご説明いただけないでしょうか。

    >input要素毎にonkeydownイベントを設定

    確かに設定したのですが、以下のような単純な処理も試しましたが

    フォームロードでカーソルがなくなったり、最後の登録ボタンへ一気に移動したりで

    よくわかりません。

    どうかよろしくお願い致します。

      function procNextCtrl2(e){
       var c = e.keyCode;
       if( c == 13 ){
        document.all.item("TextBox3").focus();
       }
      }
      function procNextCtrl1(e){
       var c = e.keyCode;
       if( c == 13 ){
        document.all.item("TextBox2").focus();
       }
      }

    (省略)

       日付    <asp:TextBox ID="TextBox1" onKeyDown="procNextCtrl1(event)" runat="server" TabIndex="0"></asp:TextBox>
       都道府県コード  <asp:TextBox ID="TextBox2" onKeyDown="procNextCtrl2(event)" runat="server" TabIndex="1"></asp:TextBox>  

    2012年5月15日 4:20
  • 「汎用性はなくても構いません」とのことですが、動作ブラウザーはIEのみでいいのでしょうか? JavaScriptのイベント周りはブラウザー依存が激しいですよ。
    2012年5月15日 4:30
  • お願い致します、IEのみで十分結構です。

    利用箇所は1端末だけです。

    本来は、このほかにテキストボックスがあと10個のみ

    登録ボタンとクリアボタンだけです。

    よろしくお願い致します。

    2012年5月15日 4:34
  • かるあさんが対応してたのに横やりすみません。
    でも、GridView内とかDetailViewとかに配置された
    テキストとかはコントロールぶん回しじゃ抽出できないなーと思って…。

    質問者にいっこだけ。
    ASP側(~.vb)でIDが「TextBox2」だったとしても
    クライアント(javascript)では「TextBox2」ってIDにはならないですよ…;;。

    1.はじめに、起動時に「日付」にフォーカスしたい。
    →「ASP.NET フォーカス」でグーグル検索。一発で見つかる。
     これからは質問前に検索しましょう。そのほうが早いです。

    2.以降
    以下をHTML文書で保管し、動きをみる。
    そして理解してあなたのソースへ反映させる。
    ちなみに、ボタンでEnter押下したとき、クリックキャンセルするようにしてますが
    同じように書いても、submitボタンはキャンセルできませんのであしからず。
    んで、どうせ「テキスト全選択状態でフォーカス移動したいんです」って
    要望が来ると予測してそれも組み込んどきました。


    <head runat="server">
    <title>無題のページ</title>

    <script language="javascript" type="text/javascript">


            function ChgKeyCode() {
                if (event.keyCode == 13) {  //押下キーがEnterの場合
                    if ((event.srcElement.type == 'button') || (event.srcElement.type == 'submit')) {
    alert('ボタンよっ!!!');
                        return false;
                    }
                    else {
                        //その他エレメントはタブ押下にすり替える
                        event.keyCode = 9;
                    }
                }
                return true;
            }

    function focus_set(ctrl_id) {

        var obj = document.getElementById(ctrl_id);
        if (obj == null) { return; }

        if ( obj.disabled == false ) {
            obj.focus();

            //テキスト入力ボックスだったら、value値を選択状態にする。
            if ( (obj.type == 'text') || (obj.type == 'textarea') ) {
                obj.select();
            }
        }

    }

    </script>

    </head>

    <body onKeyDown="ChgKeyCode()">
        <form id="form1" runat="server">
    <div>
    <input type="submit" tabindex="5" value="送信" />
    <input type="button" tabindex="4" value="ボタン" />
    <input type="text" name="name1" id="name1" size="30" maxlength="20" tabindex="3" value="あいうえお" />
    <input type="text" name="name2" id="name2"size="30" maxlength="20" tabindex="2" value="かきくけこ" />
    <input type="text" name="name3" id="name3"size="30" maxlength="20" tabindex="1" value="さしすせそ" />
    </div>
           
    <script language='javascript'>
      <!--
        focus_set('name3');
      -->
    </script>

        </form>

    </body>

    • 回答としてマーク pythonk 2012年5月15日 8:23
    2012年5月15日 6:47
  • かるあさんが対応してたのに横やりすみません。
    でも、GridView内とかDetailViewとかに配置された
    テキストとかはコントロールぶん回しじゃ抽出できないなーと思って…。

    あっ、確かに。。。ご指摘ありがとうございます。

    各input要素毎にonkeydownイベントを設定していけばいいと思いますよっていうのはこんなイメージです。

    onkeydownはサーバーイベントが無いので直接書いても、そのまま出力されるはずです。

    <asp:FormView runat="server" ID="FormView1">
        <ItemTemplate>
            <asp:TextBox runat="server" ID="TextBox1" Text='<%# Eval("Text1") %>' onkeydown="ChgKeyCode()" />
            <asp:TextBox runat="server" ID="TextBox2" Text='<%# Eval("Text2") %>' onkeydown="ChgKeyCode()" />
        </ItemTemplate>
        <EditItemTemplate>
            <asp:TextBox runat="server" ID="TextBox1" Text='<%# Eval("Text1") %>' onkeydown="ChgKeyCode()" />
            <asp:TextBox runat="server" ID="TextBox2" Text='<%# Eval("Text2") %>' onkeydown="ChgKeyCode()" />
        </EditItemTemplate>
    </asp:FormView>
    

    • 回答としてマーク pythonk 2012年5月15日 8:23
    2012年5月15日 8:01
  • ありがとうございます。

    解決しました、皆さんありがとうございました。

    2012年5月15日 8:23
  • 前のスレッドも中途半端で終わってますが、結局どのように解決したのか
    ぐらいは書いておきましょう。それがフォーラムに参加する人の、最低限
    のマナーだと思います。

    2012年5月15日 13:29