Share via

Enter キーでの Submit を抑止する方法

  • [アーティクル]

download1.gif サンプル コードのダウンロード (PHPtips_EnterNoSubmit.msi, 245 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

フォーム上にあるテキスト ボックスで Enter キーが押されても Submit したくない場合には、JavaScript の onkeydown イベントで Enter キーが押されたときに処理をキャンセルすることで実現できます。

従来の ASP や、PHP では、<Form> タグの onkeydown イベントに JavaScript を埋め込んでいました。ASP.NET 2.0 では、HtmlForm コントロールの Attributes プロパティで、属性名に onkeydown イベントを指定して、値に JavaScript を指定します。では、実際に Enter キーでの Submit を抑止してみましょう。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Sample Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtFrom" runat="server" Width="64px"></asp:TextBox>
        <asp:Button ID="btnCopy" runat="server" Text=">" Width="31px" OnClick="btnCopy_Click" />
        <asp:TextBox ID="txtTo" runat="server" ReadOnly="True" Width="64px" BorderColor="Black" 
        BorderStyle="Solid" BorderWidth="1px"></asp:TextBox>
    </div>
    </form>
</body>
</html>

リスト1．Submit すると txtFrom へ入力した文字列を txtTo に表示する Default.aspx

はじめに、txtFrom と txtTo という ID を持つテキスト ボックス コントロールと、btnCopy という ID を持つボタン コントロールがあるページを用意します（リスト1）。このページの form1 を Submit すると、txtFrom に入力された文字列を txtTo に表示します。ただし、Enter キーによる Submit は抑止したいので、form1 の Attributes プロパティで、属性名に onkeydown イベントを指定して、値に JavaScript を指定します。（リスト2）。

Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub btnCopy_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCopy.Click
        txtTo.Text = txtFrom.Text
    End Sub
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        form1.Attributes("onkeydown") = "if(event.keyCode==13){
                                            if(window.event.srcElement.type!='submit' && 
                                               window.event.srcElement.type!='textarea'){
                                               return false;
                                            }
                                         }"
    End Sub
End Class

リスト2．Submit すると txtFrom へ入力した文字列を txtTo に表示する Default.aspx.vb

図

図 1 サンプル Default.aspx の表示画面

Enter キーの抑止を行っていないとき、フォーム内にあるテキスト ボックスで Enter キーを押すと、Submit されるため、左から右のテキスト ボックスへコピーされます（図2）。リスト2. の Page_Load に記述した処理を実装することで、Enter キーを押しても Submit されません（図3）。

Cc766700.EnterNoSubmit_fig02(ja-jp,MSDN.10).gif

図 2 Enter キーの抑止を行っていない状態

Cc766700.EnterNoSubmit_fig03(ja-jp,MSDN.10).gif

図 3 Enter キーの抑止を行った状態