WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ユーザー入力のリセット

by WebSurfer 29. April 2012 23:44

ユーザーが TextBox や CheckBox に入力した文字、チェックをクリアするという話です。

ユーザー入力のリセット

html の <input type="reset" ... がユーザー入力をクリアするのに使えますが、あらかじめ TextBox.Text や ChechBox.Checked を設定してあると、それらはクリアできません。

また、一旦ポストバックすると TextBox には入力した文字列が(html では <input type="text" ... の value 属性の文字列)、CheckBox にはチェックした結果(html では <input type="checkbox" ... の checked 属性)が設定されるはずです。

その状態では <input type="reset" ... では TextBox も CheckBox もクリアできません。もともと <input type="reset" ... は、元に戻すということらしく、完全にクリアするということではないようです。

完全にクリアするには、サーバー側で行う方法もありますが、わざわざポストバックしてサーバー側で処置するのはムダなので、クライアントスクリプトで対応するのがよさそうです。

JavaScript でも可能だと思いますが、複数の input 要素に同じ処置を繰り返すので jQuery を使うのが簡単です。以下のコードような感じです。

実際に動かして試せるよう 実験室 にアップしましたので、興味のある方は試してみてください。

<%@ Page Language="C#" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">
  </script>
  <script type="text/javascript">
  //<![CDATA[

    // [Uncheck All]ボタンクリックで、すべての TextBox, 
    // CheckBox のチェックを外す。
    $(function () {
      $('#clearAll').click(function () {
        $('input:checkbox').attr('checked', false);
        $('input:text').val("");
      });
    });

  //]]>
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>        
    <input type="button" 
      id="clearAll" value="jQuery でクリア" />
    <br />
    <input id="Reset1" 
      type='reset' value="input type='reset'" />
    <hr />
    <asp:TextBox ID="TextBox1" 
      runat="server" Text="ABC">
    </asp:TextBox>
    <br />
    <asp:TextBox ID="TextBox2" runat="server">
    </asp:TextBox>
    <br />
    <asp:CheckBox ID="CheckBox1" 
      runat="server" Checked="True" />
    <br />
    <asp:CheckBox ID="CheckBox2" runat="server" />
    <br />
    <asp:Button ID="Button1" 
      runat="server" Text="PostBack" />
  </div>    
  </form>
</body>
</html>

Tags: ,

JavaScript

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  June 2021  >>
MoTuWeThFrSaSu
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar