WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

ユーザー入力のリセット

by WebSurfer 2012年4月29日 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月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年3月  >>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar