jQuery 2: TextBoxがフォーカスを取得したときテキストボックスの内容を消去するには

ここでは、jQueryを使用してASP.NETのTextBoxコントールがフォーカスを取得したとき、テキストボックス(TextBox)の内容を消去する方法を解説します。TextBoxがフォーカスを取得したときにテキストボックスの内容を消化するには、HTMLのinput(type=”text”)要素のクリックイベント(onclick=”…”)を利用します。

テキストボックスの内容を消去するには、jQueryでinput要素のvalueプロパティの値を空白にします。jQueryでHTMLのinput要素を検索するには、input要素のclass属性の名前を使用して「$(‘input.cssFocus’)」のように記述します。

jQueryのクリックイベントは、「$(‘要素’).click(function() {…})」のように記述します。

$('input.cssFocus').click(function () {
 this.value = ''; // テキストボックスの内容を消去する
});

<asp:TextBox ID="TextBox1" runat="server" CssClass="cssFocus" Columns="60" Text="ここにフォーカスを移動したら消去します…" />

サンプルの作成手順(jQuery-2.aspx)

  1. WebページにTextBoxを配置する
    Visual Studio(VS)の「ツールボックス」から「TextBox」をドラッグ&ドロップしてWebページに配置します。TextBoxのTextプロパティに「ここにフォーカスを移動したら消去します…」を設定します。CssClassプロパティに「cssFocus」、Columnsプロパティに「60」を設定します。これでテキストボックスにデフォルトのテキスト文字が表示されます。

    <asp:TextBox ID="TextBox1" runat="server" CssClass="cssFocus" Columns="60" Text="ここにフォーカスを移動したら消去します…" />
    
  2. jQueryのライブラリを組み込む
    Webページの<head>…</head>タグ内に、<script>…</script>タグを追加してjQuery 2.xのライブラリーを組み込みます。

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  3. jQueryのコードを挿入する
    <head>…</head>タグ内に<script>…</script>タグを追加してjQueryのコードを記述します。

     <script type="text/javascript">
      $(function () {
       $('input.cssFocus').click(function () {
        this.value = '';  
       });
      });
     </script>
  4. Webページをブラウザに表示する
    VSのソリューションエクスプローラからサンプルのWebページ「jQuery-2.aspx」にマウスを移動して右クリックします。コンテキストメニューが表示されたら「ブラウザで表示」をクリックして選択します。
  5. テキストボックスをクリックする
    ブラウザにサンプルが表示されたら、テキストボックスをクリックします。このとき、テキスト文字が消去されることを確認します。

サンプルのソースコード(jQuery-2.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery-2.aspx.cs" Inherits="jQuery_2" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>jQuery 2: TextBoxがフォーカスを取得したときテキストボックスの内容を消去するには</title>
 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
  $('input.cssFocus').click(function () {
   this.value = '';
  });
 });
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <h1>TextBoxがフォーカスを取得したときテキストボックスの内容を消去するには</h1>
 <asp:TextBox ID="TextBox1" runat="server" CssClass="cssFocus" Columns="60" Text="ここにフォーカスを移動したら消去します…" />
 </div>
 </form>
</body>
</html>

VSのサンプル画像(jQuery-2.aspx)

jQuery-2

シェアする

  • このエントリーをはてなブックマークに追加

フォローする