ページ

2004年5月18日火曜日

ASP.NET でクライアントサイドのエンターキーを制御する

IE では、テキストボックスが 1つとボタンが 1つといった場合に、テキストボックスでエンターキー(改行キー)を押すと自動的に submit してしまうため、PostBack が発生してしまいます。
こいつを PostBack させないようにする方法です。


/// <summary>
/// エンターキーを制御するクライアントスクリプトを出力します。
/// </summary>
/// <param name="page">スクリプトを出力する<see cref="System.Web.UI.Page"/>。</param>
public static void RegisterEnterKeyPageScript(System.Web.UI.Page page)
{
    page.RegisterClientScriptBlock("enterkey",
        "<script language='javascript'>\n" +
        "function text_keydown(e, name)\n" +
        "{\n" +
        "  var key = 0;\n" +
        "  if (typeof(e.keyCode) != 'undefined') {\n" +
        "    key = e.keyCode;\n" +
        "  } else if (typeof(e.which) != 'undefined') {\n" +
        "    key = e.which;\n" +
        "  }\n" +
        "  if (key == 0xd) {\n" +
        "    if (typeof(name) != 'undefined' && name != '') {\n" +
        "      document.forms[0].elements[name].click();\n" +
        "    }\n" +
        "    return false;\n" +
        "  }" +
        "  return true;" +
        "}" +
        "</script>");
}
 
 
/// <summary>
/// エンターキー押し下げ時にサブミットするボタンを設定します。
/// name が "" のときはエンターキーを無視します。
/// </summary>
/// <param name="control">設定する<see cref="System.Web.UI.WebControls.WebControl"/>。</param>
/// <param name="name">サブミットするボタンの name。</param>
public static void RegisterEnterKeyScript(System.Web.UI.WebControls.WebControl control, string name)
{
    control.Attributes["onkeydown"] = "return text_keydown(event, '" + name + "');";
}

まずはこんなメソッドをどこかに用意しといてください。
で、テキストボックスが TextBox1、ボタンが Button1 とすると、Page_Load イベントで


RegisterEnterKeyPageScript(this);
RegisterEnterKeyScript(TextBox1, "");

と呼び出してやればエンターキーが無効になるはずです。
また、


RegisterEnterKeyPageScript(this);
RegisterEnterKeyScript(TextBox1, "Button1");

としてやれば、テキストボックスでエンターキーを押すと Button1 をクリックしたことになるはずです。


"はず" なんて書いているのは、これらの動作は ASP.NET は関係なくて完全にクライアントのブラウザに依存するからです。実際、上記のメソッドはクライアントサイドの JavaScript を出力してるだけです。なので、JavaScript がオフにされてると上記のコードは動きません。それと、IE6 とと Netscape6 あたりなら動くと思いますが、他のブラウザはどうかわかりません。
(「こうしたほうがいいよ」 ということがあったらコメントでもつけてください)

5 件のコメント:

  1. >(「こうしたほうがいいよ」 ということがあったらコメントでもつけてください)


     とりあえず、スクリプトは @ でのリテラルのほうが改行を直接打ち込めるのでエスケープが少なくて綺麗かと。


     そう考えると、jsファイルをどっかから読むようにして Cache するのがかっこいいのかなぁ

     距離が離れると解りづらいとするか、よく分離されているとするかで線が分かれますねぇ。

    返信削除
  2. > とりあえず、スクリプトは @ でのリテラルのほうが...


    なるほど、確かにそうですね。


    というか、ASP.NET では <script language="javascript" src="hoge.js" />

    だけにしておいて、別に hoge.js を用意しておいたほうがいいのかも。

    スクリプトを変更するときに、わざわざ、ビルドしなおさなくて済むし。

    返信削除
  3. これってバグだと思うんだけどなぁ。直してほしいなぁ。

    どっかにKBがあったような。・・・調べたけど見つかりませんでした。がっふり。

    返信削除
  4. <script> ... </script>で囲むだけでもよいと思うし、

    VisualStudio がサポートしてくれるのでうれしいですよ。

    CodeBehind でも.aspxファイルに書いているぶんには

    ビルドは不要のはずです。ページが更新されると

    アプリケーションが再起動してロード時にページコンパイルしますから。

    返信削除
  5. 田中 健二2004年7月8日 10:47

    ASP.NET (VB)初心者です。

    是非とも、このエンターキーを無効にする方法を実装したいのでずが、

    コーディングが分かりません。

    もちろん、スクリプトは設定しましたが、public static void RegisterEnterKeyScript 等の

    設定方法が VBでどうしたらよいのか悩んでいます。


    是非とも、お教え下さい。

    返信削除