none
テキストボックスへのセットフォーカス RRS feed

  • 質問

  • C# で 書いています。

    webフォーム上に テキストボックスを2つ、ボタンを1つ 配置しています。

    TextBox1 [             ]

    TextBox2 [             ]

    Button1         □

    この 状態で TextBox1 に 入力終了後 エンターを 押すと

    Button1 の クリックイベントが 発生してしまいます。

    TextBox2 へ カーソルを 移動させたいのですが どうすれば よいでしょうか?

    2007年2月8日 3:23

回答

  • JavaScriptでいろいろ書けばできないことではないと思いますが、ただ、Web(ブラウザ)を利用する際の
    一般的な操作性からはずれてしまいますので、そういった仕様にしないほうがよいと思います。

     

    2007年2月8日 4:27
  • 最近似たようなご質問が。

    ASP.NET で Enter キー入力でテキストボックスにフォーカスを移動する方法 (atmarkit.co.jp)

    Web のアクセシビリティから外れますし、止めた方が良いでしょう。

    Enter でフォーカス遷移するのは、専用機の概念です。
    Windows でさえも、Enter は決定という意味しか持ちません。(Tab がフォーカス遷移)

    2007年2月8日 4:49
  •  

     アドバイスありがとうございます。

     

     現在 エンターを押したとき TextBox1_TextChanged(object sender, EventArgs e) で ひろえてるみたいなので 考え中です。

      一般的な操作性に反する と 記述がありましたが、 ここに サインイン するときもそうですが

     

      ユーザー名を 入力後 エンター の方が 一般的だと思うのですが・・・

      パスワードが ありませんの エラーに なりますよね。

     

      例えば、 MFC なら PreTranslateMessage(MSG* pMsg)  を使えばフォーム上のエディットにフォーカスをあてることができます。

     

     

    2007年2月8日 5:24
  • > 一般的な操作性に反する と 記述がありましたが、 ここに サインイン するときもそうですが
    > ユーザー名を 入力後 エンター の方が 一般的だと思うのですが・・・

    「ブラウザ上での」一般的な操作性ではEnterキーは使わないですよね。。。

    2007年2月8日 6:04
  • 操作性云々の話は仕様の話なのでとりあえず置いておいて、アドバイスだけ。


     現在 エンターを押したとき TextBox1_TextChanged(object sender, EventArgs e) で ひろえてるみたいなので 考え中です。

    TextBox1_TextChanged は既にサーバーにリクエストされた状態です。丸中太郎さんが求めているのは、おそらく「サーバーにリクエストしないでフォーカス移動」ですよね。

    ですので、


    えば、 MFC なら PreTranslateMessage(MSG* pMsg)  を使えばフォーム上のエディットにフォーカスをあてることができます。

    と似たような事を「クライアント側(つまり Javascript)」で行う必要があります。
    私はエンターキー押下でフォーカス移動させたいと思った事がないので、明確な答えを出せなくてすみません。「Javascript + キーイベント」で検索すれば解決の糸口にはなるでしょう。ブラウザの種類に応じた処理をしないといけないので面倒ですが。

    2007年2月8日 7:37
  • 既に大御所の方々が返信されていますが、
    コントロールフォーカスの移動は普通[Tab]キーだと思います。
    どこのWebページでも[Enter]キーでのフィールド間を移動することはしないと思いますが。。。Windowsフォームだとしてもコントロールフォーカスの移動は[Tab]キーが普通だと思います。

    私の環境のIE6で、buttonをinput type=buttonにレンダーされるようにして、javascriptで
    onkeypressでwindow.event.keyCodeが13のとき次のtextboxを.focus()するようにしてそのような動きは実現できましたが、他の環境で同じになる保証はありません…

    他の方々が言われているように[Enter]での移動するようにするのはお勧めしません。

    2007年2月8日 9:23
  •  

     みなさんの ご意見 ありがとうございました。

     

     囚人さん の おっしゃるように テキストボックスに ポストバック TRUE を設定すれば

     エンターがとれたのですが、これはちょっと実現は難しいですね。

     

     C# だけでは、無理ということが わかりました。

     

     Webでエンターは使わない につきましては、 当方 伝票入力などの基幹業務をC#で、ためしに作ってみようか と思って 作り始めたもので 

     

     エンターで カーソルが動かない 入力画面 は 企業内では ありえません。

     テンキーとタブで 伝票入力なんて 現実問題できませんので。

     

     スクリプトの勉強をしてから 再挑戦します。

     

    2007年2月9日 4:42
  • > エンターで カーソルが動かない 入力画面 は 企業内では ありえません。
    > テンキーとタブで 伝票入力なんて 現実問題できませんので。

    慣れの問題、という気もしますが。。。
    まず、どうしてもWebアプリケーションにする必要があるのか、そこからきちんと考えるべきだと思います。はやっているみたいだからWebアプリにしてみよう、では変なところで苦労するだけですね。
    しばらく前なら各クライアントにアプリケーションを配布する作業が大変なので、Webアプリを利用しよう、といった話もありましたが、今ならClickOnceのような技術もありますからWindowsアプリでも簡単に配布できたりします。
    なぜその技術を使う必要があるのか、ということをきちんと押さえた上で、あえて苦労したい(というか苦労しないといけない理由がある)というのであれば止めませんが。

     

    2007年2月9日 5:06
  • 例えばこんなHTMLでいいですか。(私の環境のIE6ではご希望のように動作します)

    <html><head><title>タイトル</title></head>

    <script language="javascript">

    function nextfocus(code,next){

           if(code ==13){

                  document.all.item(next).focus();

           }

    }

    </script>

    <body>

    <form name="form1">

    <input type="text" name="TextBox1"  onkeypress="nextfocus(window.event.keyCode,'TextBox2')" /><br />

    <input type="text" name="TextBox2"  onkeypress="nextfocus(window.event.keyCode,'TextBox3')" /><br />

    <input type="text" name="TextBox3"  /><br />

    <input type="button" name="Button1" value="Button" onclick="submit()" />

    </form>

    </body></html>

    2007年2月9日 5:39
  •  

    メモ帳で html を 作成したところ、エンターで カーソルが 動きました。ありがとうございます。

     

    Visual Studio 2005 上で 再現 しようとしたのですが どうも うまく動いてくれません。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>無題のページ</title>
    </head>


    <script language="javascript">

    function nextfocus(  code,  next  )
    {
        if(  code  == 13  )
        {
            document.all.item(  next  ).focus();

        }

    }

    </script>

     

    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

             以下省略

     

    ここに はめてみたのですが、エラーに なります。

    エラー 1 検証 (XHTML 1.0 Transitional): 要素 'script' には必要な属性 'type' がありません。 E:\vs2005\web002\Default.aspx 11 2 E:\vs2005\web002\

    残念。

     

    2007年2月9日 6:10

すべての返信

  • JavaScriptでいろいろ書けばできないことではないと思いますが、ただ、Web(ブラウザ)を利用する際の
    一般的な操作性からはずれてしまいますので、そういった仕様にしないほうがよいと思います。

     

    2007年2月8日 4:27
  • 最近似たようなご質問が。

    ASP.NET で Enter キー入力でテキストボックスにフォーカスを移動する方法 (atmarkit.co.jp)

    Web のアクセシビリティから外れますし、止めた方が良いでしょう。

    Enter でフォーカス遷移するのは、専用機の概念です。
    Windows でさえも、Enter は決定という意味しか持ちません。(Tab がフォーカス遷移)

    2007年2月8日 4:49
  •  

     アドバイスありがとうございます。

     

     現在 エンターを押したとき TextBox1_TextChanged(object sender, EventArgs e) で ひろえてるみたいなので 考え中です。

      一般的な操作性に反する と 記述がありましたが、 ここに サインイン するときもそうですが

     

      ユーザー名を 入力後 エンター の方が 一般的だと思うのですが・・・

      パスワードが ありませんの エラーに なりますよね。

     

      例えば、 MFC なら PreTranslateMessage(MSG* pMsg)  を使えばフォーム上のエディットにフォーカスをあてることができます。

     

     

    2007年2月8日 5:24
  • > 一般的な操作性に反する と 記述がありましたが、 ここに サインイン するときもそうですが
    > ユーザー名を 入力後 エンター の方が 一般的だと思うのですが・・・

    「ブラウザ上での」一般的な操作性ではEnterキーは使わないですよね。。。

    2007年2月8日 6:04
  • 操作性云々の話は仕様の話なのでとりあえず置いておいて、アドバイスだけ。


     現在 エンターを押したとき TextBox1_TextChanged(object sender, EventArgs e) で ひろえてるみたいなので 考え中です。

    TextBox1_TextChanged は既にサーバーにリクエストされた状態です。丸中太郎さんが求めているのは、おそらく「サーバーにリクエストしないでフォーカス移動」ですよね。

    ですので、


    えば、 MFC なら PreTranslateMessage(MSG* pMsg)  を使えばフォーム上のエディットにフォーカスをあてることができます。

    と似たような事を「クライアント側(つまり Javascript)」で行う必要があります。
    私はエンターキー押下でフォーカス移動させたいと思った事がないので、明確な答えを出せなくてすみません。「Javascript + キーイベント」で検索すれば解決の糸口にはなるでしょう。ブラウザの種類に応じた処理をしないといけないので面倒ですが。

    2007年2月8日 7:37
  • 既に大御所の方々が返信されていますが、
    コントロールフォーカスの移動は普通[Tab]キーだと思います。
    どこのWebページでも[Enter]キーでのフィールド間を移動することはしないと思いますが。。。Windowsフォームだとしてもコントロールフォーカスの移動は[Tab]キーが普通だと思います。

    私の環境のIE6で、buttonをinput type=buttonにレンダーされるようにして、javascriptで
    onkeypressでwindow.event.keyCodeが13のとき次のtextboxを.focus()するようにしてそのような動きは実現できましたが、他の環境で同じになる保証はありません…

    他の方々が言われているように[Enter]での移動するようにするのはお勧めしません。

    2007年2月8日 9:23
  •  

     みなさんの ご意見 ありがとうございました。

     

     囚人さん の おっしゃるように テキストボックスに ポストバック TRUE を設定すれば

     エンターがとれたのですが、これはちょっと実現は難しいですね。

     

     C# だけでは、無理ということが わかりました。

     

     Webでエンターは使わない につきましては、 当方 伝票入力などの基幹業務をC#で、ためしに作ってみようか と思って 作り始めたもので 

     

     エンターで カーソルが動かない 入力画面 は 企業内では ありえません。

     テンキーとタブで 伝票入力なんて 現実問題できませんので。

     

     スクリプトの勉強をしてから 再挑戦します。

     

    2007年2月9日 4:42
  • > エンターで カーソルが動かない 入力画面 は 企業内では ありえません。
    > テンキーとタブで 伝票入力なんて 現実問題できませんので。

    慣れの問題、という気もしますが。。。
    まず、どうしてもWebアプリケーションにする必要があるのか、そこからきちんと考えるべきだと思います。はやっているみたいだからWebアプリにしてみよう、では変なところで苦労するだけですね。
    しばらく前なら各クライアントにアプリケーションを配布する作業が大変なので、Webアプリを利用しよう、といった話もありましたが、今ならClickOnceのような技術もありますからWindowsアプリでも簡単に配布できたりします。
    なぜその技術を使う必要があるのか、ということをきちんと押さえた上で、あえて苦労したい(というか苦労しないといけない理由がある)というのであれば止めませんが。

     

    2007年2月9日 5:06
  • 例えばこんなHTMLでいいですか。(私の環境のIE6ではご希望のように動作します)

    <html><head><title>タイトル</title></head>

    <script language="javascript">

    function nextfocus(code,next){

           if(code ==13){

                  document.all.item(next).focus();

           }

    }

    </script>

    <body>

    <form name="form1">

    <input type="text" name="TextBox1"  onkeypress="nextfocus(window.event.keyCode,'TextBox2')" /><br />

    <input type="text" name="TextBox2"  onkeypress="nextfocus(window.event.keyCode,'TextBox3')" /><br />

    <input type="text" name="TextBox3"  /><br />

    <input type="button" name="Button1" value="Button" onclick="submit()" />

    </form>

    </body></html>

    2007年2月9日 5:39
  •  

    メモ帳で html を 作成したところ、エンターで カーソルが 動きました。ありがとうございます。

     

    Visual Studio 2005 上で 再現 しようとしたのですが どうも うまく動いてくれません。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>無題のページ</title>
    </head>


    <script language="javascript">

    function nextfocus(  code,  next  )
    {
        if(  code  == 13  )
        {
            document.all.item(  next  ).focus();

        }

    }

    </script>

     

    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

             以下省略

     

    ここに はめてみたのですが、エラーに なります。

    エラー 1 検証 (XHTML 1.0 Transitional): 要素 'script' には必要な属性 'type' がありません。 E:\vs2005\web002\Default.aspx 11 2 E:\vs2005\web002\

    残念。

     

    2007年2月9日 6:10
  • htmlのスキーマに対する検証エラーなのでビルドエラーではないはずです。
    メッセージ指示の通り修正すればこのエラーもなくせます。
    Visual Studio 2005のIDEであればIntelliSense機能[Ctrl]+[Space]を使って入力すれば簡単に修正できるはずです。

    Button WebサーバコントロールのUseSubmitBehaviorはtrueだとsubmitボタンになってしまい[Enter]に反応してしまいます。input type=buttonにするにはfalseにします。

    2007年2月9日 6:33
  • IIJIMAS さん どうも ありがとうございました。

     

    下記 コード で 動作確認できました。

     

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>無題のページ</title>
    </head>


    <script language="javascript">

    function nextfocus(  code,  next  )
    {
        if(  code  == 13  )
        {
            document.all.item(  next  ).focus();

        }

    }

    </script>

     

     

    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"  onkeypress="nextfocus(window.event.keyCode,'TextBox2')" ></asp:TextBox>
            &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
            <br />
            <br />
            <asp:TextBox ID="TextBox2" runat="server"  onkeypress="nextfocus(window.event.keyCode,'TextBox3')" ></asp:TextBox>
            &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
            <br />
            <br />
            <asp:TextBox ID="TextBox3" runat="server"  onkeypress="nextfocus(window.event.keyCode,'Button1')" ></asp:TextBox>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />
            <br />
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" UseSubmitBehavior="False" />
            &nbsp;&nbsp;
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
        </form>
    </body>
    </html>

    2007年2月9日 7:20
  • > JavaScriptでいろいろ書けばできないことではないと思いますが、ただ、Web(ブラウザ)を利用する際の
    > 一般的な操作性からはずれてしまいますので、そういった仕様にしないほうがよいと思います。
     
    > Enter でフォーカス遷移するのは、専用機の概念です。
    > Windows でさえも、Enter は決定という意味しか持ちません。(Tab がフォーカス遷移)

    > 既に大御所の方々が返信されていますが、
    > コントロールフォーカスの移動は普通[Tab]キーだと思います。
    > どこのWebページでも[Enter]キーでのフィールド間を移動することはしないと思いますが。。。
    > Windowsフォームだとしてもコントロールフォーカスの移動は[Tab]キーが普通だと思います。

    これらは開発側の意見です。
    あくまで開発ツールが、Enterを考慮していないために起きた現象です。
    本来使いやすさを基準にするものです。
    Tabキーが意外と優先されてきていますが、実際は、キー配列で使いづらい位置のままです。

    Web に関しては、開発工数がかかるので、そのぶん削除しているだけでしょう。
    又、本来マウスが主体です。キー入力自体少ないです。
    そして、Tabキーに関しては、考慮しているページは少ないです。
    (タブの移動順序など考慮されているページは少ないです)
    それほどお金をかけないで作成している人がほとんどでしょう。

    開発側が、まず工数がかかることを意識し、それを踏まえて、作成するのが正しいやり方でしょう。
    一方的に、一般化しないで欲しいですね。ほとんど、予算と時間、そして上記を理由にしている開発者
    のせいでしょう。

    そもそも、各日本メーカなどはやはり使いやすさを考慮して、対応しています。
    今後、AJAXなどでなおさらその傾向は強まるでしょう。
    技術力のなさを露呈しないよう、言い方を考えるべきですね。
    意外と上記を理由にしがちですが、使う側にしてみれば、使いやすくして欲しいものです。
    ※本来技術力を売りにするものでしょう。

    そう言う意味では、丸中太郎さん、使いやすいものをがんばって作ってください。
    (この作りだと、ブラウザはIEのみ対応するようですね)

    2007年2月16日 13:08
  • > あくまで開発ツールが、Enterを考慮していないために起きた現象です。

    いえ、開発ツールのレベルではなく、HTMLというWebの仕様のレベルの問題です。
    そもそもHTMLではEnterキーでのコントロール移動は想定されていません。
    仕様というのは一般化されたものだと思いますので、仕様の話をすることが一方的な話にはならないと思います。

    また、Webの標準にあっていない動作をさせる、ということは、ほかのWebアプリとのユーザインタフェースの一貫性がなくなるということでもあります。
    そういった点も開発者としては気になります。

    2007年2月16日 15:26
  • > HTMLというWebの仕様のレベル

    勝手に仕様を決めないで下さい。
    そもそも、HTMLと、Webを同列で述べている時点で間違っています。
    asp.netのサーバーコントロールを見てもわかると思うのですが?
    HTMLだけ述べるなら、ここで話すのは間違っていますよ。

    > ほかのWebアプリとのユーザインタフェースの一貫性

    そもそも、ブラウザ、及び、OSによってすでに一貫性は失われています。
    又、開発するためのソフト(言語)がどれだけあるのか理解しているのでし
    ょうか?
    これを補うために、各開発者は努力をしているのではないでしょうか。

    そもそも、ユーザインタフェースとはどの部分を指しているのでしょうね。
    これを言うと、asp.net のコントロール自体も問題ということになりますよ。

    2007年2月16日 16:47