もう迷わない！jQueryでプレースホルダテキストを自由自在に操るテクニック集

2024-05-14

jQueryを使ってプレースホルダテキストを変更する方法

方法1：attr()メソッドを使う

最も基本的な方法は、attr()メソッドを使ってplaceholder属性を直接変更する方法です。

<input type="text" id="myInput" placeholder="元のプレースホルダテキスト">

$(document).ready(function(){
  $("#myInput").attr("placeholder", "新しいプレースホルダテキスト");
});

val()メソッドを使って、入力欄の値を取得・設定する方法でもプレースホルダテキストを変更できます。ただし、この方法は古いブラウザでは動作しない可能性があることに注意が必要です。

<input type="text" id="myInput" placeholder="元のプレースホルダテキスト">

$(document).ready(function(){
  var placeholderText = $("#myInput").attr("placeholder");
  if (placeholderText) {
    $("#myInput").val(placeholderText);
    $("#myInput").attr("placeholder", "");
  }
});

方法3：HTML5のplaceholder属性とCSSの::placeholder擬似要素を使う

HTML5では、placeholder属性に複数の値を設定することができます。この機能とCSSの::placeholder擬似要素を組み合わせることで、フォーカス状態に応じてプレースホルダテキストを変更することができます。

<input type="text" id="myInput" placeholder="フォーカスなし:" value="フォーカスあり:">

/* フォーカスなしの場合 */
input[placeholder]::placeholder {
  color: #999;
}

/* フォーカスありの場合 */
input:focus::placeholder {
  color: #000;
}

jQueryプラグインを使う

上記の方法以外にも、jQueryプラグインを使ってプレースホルダテキストを変更する方法もあります。代表的なプラグインとして、以下のものがあります。

これらのプラグインは、より高度な機能を提供している場合が多いので、複雑な要件がある場合は検討してみるのも良いでしょう。

HTML

<!DOCTYPE html>
<html>
<head>
<title>jQueryでプレースホルダテキストを変更</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <input type="text" id="myInput" placeholder="元のプレースホルダテキスト">
  <button id="changeButton">プレースホルダを変更</button>

  <script>
    $(document).ready(function(){
      $("#changeButton").click(function(){
        $("#myInput").attr("placeholder", "新しいプレースホルダテキスト");
      });
    });
  </script>
</body>
</html>

説明

HTMLコードで、入力欄（id="myInput"）とボタン（id="changeButton"）を定義します。
$(document).ready(function(){})内で、ボタンがクリックされたときの処理を記述します。
ボタンがクリックされたら、$("#myInput").attr("placeholder", "新しいプレースホルダテキスト");を実行して、入力欄のプレースホルダテキストを "新しいプレースホルダテキスト" に変更します。

実行方法

上記のHTMLコードを保存して、index.htmlなどの名前で保存します。
Webブラウザで、index.htmlファイルを開きます。
"プレースホルダを変更" ボタンをクリックすると、入力欄のプレースホルダテキストが "新しいプレースホルダテキスト" に変更されます。

応用例

このサンプルコードは、以下のような場合に役立ちます。

フォームの入力欄に、状況に応じて異なるプレースホルダテキストを表示したい場合
入力欄にフォーカスが当たったときに、プレースホルダテキストを目立たせるようにしたい場合
ユーザーが誤った入力をしたときに、プレースホルダテキストを変更して注意を促したい場合

上記以外にも、jQueryを使ってプレースホルダテキストを動的に変更する方法は様々です。ご自身のニーズに合わせて、適切な方法を選択してください。

jQueryを使ってプレースホルダテキストを変更するその他の方法

val()メソッドとfocus()イベントを使う

この方法は、フォーカス時にのみプレースホルダテキストを変更したい場合に有効です。

<input type="text" id="myInput" placeholder="元のプレースホルダテキスト">

$(document).ready(function(){
  $("#myInput").focus(function(){
    var placeholderText = $(this).attr("placeholder");
    if (placeholderText) {
      $(this).val(placeholderText);
      $(this).attr("placeholder", "");
    }
  }).blur(function(){
    var text = $(this).val();
    if (!text) {
      $(this).attr("placeholder", placeholderText);
    }
  });
});

prop()メソッドは、attr()メソッドと似ていますが、IE8などの古いブラウザでも動作します。

<input type="text" id="myInput" placeholder="元のプレースホルダテキスト">

$(document).ready(function(){
  $("#changeButton").click(function(){
    $("#myInput").prop("placeholder", "新しいプレースホルダテキスト");
  });
});

jQuery UI Placeholder pluginは、jQuery UIの一部として提供されているプラグインで、プレースホルダテキストの処理をより簡単にします。

<input type="text" id="myInput" placeholder="元のプレースホルダテキスト">

$(document).ready(function(){
  $("#myInput").placeholder();
  $("#changeButton").click(function(){
    $("#myInput").placeholder("新しいプレースホルダテキスト");
  });
});

カスタムプラグインを使う

上記の方法でニーズを満たせない場合は、カスタムプラグインを作成することもできます。

これらの方法は、それぞれ異なる利点と欠点があります。ご自身のニーズに合わせて、適切な方法を選択してください。

補足