ASP.NET で Enter キーで意図しない Submit（PostBack）が発生する

はじめに

ASP.NET では Enter キーで Web フォームを送信するようになっています。しかし、そうしたくない場合ももちろんあり、その方法もあります。ネットで検索するとすぐにその方法が見つかりますが、日本語でトップヒットする情報ではうまくいかないケースが発生したため、こちらに記します。

基本的な方法

ネットで検索すると、隠しボタンをデフォルトボタンにしてクリックイベントに return false; を設定するという方法がヒットします。

<form id="form1"
      runat="server" 
      defaultbutton="HiddenDummyButton">    <!-- ポイント -->
    <!--略-->
    <asp:Button ID="HiddenDummyButton" 
                runat="server" 
                Text="Button" 
                onClientClick="return false;" 
                style="display:none;" />    <!-- ポイント -->
    <!--略-->
</form>

概ねこの方法で問題ありません。

うまくいかないケース

この方法だけではうまくいかない場合が発生しました。画面上に表示されている別のボタンが勝手にデフォルトボタンのように振舞ってしまうのです。

ブラウザによってその振る舞いは違ったため、それはもちろん環境によります。しかし対象ユーザーの使うブラウザで発生したため、対策を取らざるを得ません。

生成された HTML を見てみると、該当するボタンの type が button ではなく submit になっています。これは普通に button になってほしいところ。

そのような場合は、画面上に配置したボタンすべてに UseSubmitBehavior=False を明示的に指定します。

    <asp:Button ID="TheButton1"
                runat="server" 
                Text="Button"
                UseSubmitBehavior="False" />    <!-- ポイント -->

こうすることで type=button のボタンになり、デフォルトボタンのような振る舞いはしなくなりました。

UseSubmitBehavior=False をしないと type=submit になるのは基本らしいので、こちらの対策が正道かもしれません。しかしダミーボタンがあれば「このフォームは Enter キーによる送信はしない」あるいは「Enter キー入力をどうするかはオレが決める」という意思がはっきり伝わります。