jQuery placeholderに値を設定・書き換え・削除する方法

2024.04.09 2024.04.09

jQueryで「placeholder」に値を設定・書き換え・削除する方法です。

「placeholder」とは、フォームなどの入力欄にあらかじめ記入されている薄い灰色のテキストのこと。主に記入例としてのテキストが記載されている。

このplaceholderを外部から書き換えたり、消したりできないものかと思ったのだが、思ったより情報が出てこなかった。あまり需要がないのかなーっと。

ここでは jQueryで「placeholder」に値を設定・書き換え・削除する方法 を紹介します。

先に動作を確認したい方は「jQueryでplaceholderに値を設定・書き換え・削除するデモページ」へどうぞ。

1 jQueryでplaceholderに値を設定・書き換えする
2 jQueryでplaceholderの値を削除する
3 jQueryでplaceholderの値を設定・書き換え・削除するサンプル
4 まとめ

jQueryでplaceholderに値を設定・書き換えする

まずは、jQueryで「placeholder」に値を設定する方法です。

結論から言えば「attrメソッド」で値を変更できる。

$('input').attr('placeholder','書き換えたいテキスト');

例えば、このようなhtmlがあったとする。Contactフォームによくあるやつだ。

<input type="text" id="your-name" name="your-name" value="" size="30" maxlength="50">
<input type="email" id="your-email" name="your-email" value="" size="30" maxlength="255">
<input type="tel" id="your-tel" name="your-tel" value="" size="30" maxlength="25">

これに値を設定したいなら下記のコードを書けばよい。

$('#your-name').attr('placeholder', '墨田太郎');
$('#your-email').attr('placeholder', 'taro@example.com');
$('#your-tel').attr('placeholder', '03-9999-9999');

下図のように表示される。

ふむふむ、いい感じですな。

jQueryでplaceholderの値を削除する

次に、jQueryで「placeholder」の値を削除する方法です。

こちらは「removeAttrメソッド」で値を削除できる。

$('input').removeAttr('placeholder');

例えば、このようなhtmlがあったとする。

<input type="text" id="your-name" name="your-name" value="" size="30" maxlength="50" placeholder="墨田太郎">
<input type="email" id="your-email" name="your-email" value="" size="30" maxlength="255" placeholder="taro@example.com">
<input type="tel" id="your-tel" name="your-tel" value="" size="30" maxlength="25" placeholder="03-9999-9999">

この値を消したいなら下記のコードを書けばよい。

$('#your-name').removeAttr('placeholder');
$('#your-email').removeAttr('placeholder');
$('#your-tel').removeAttr('placeholder');

下図のように削除される。

ふむふむ、いい感じだ。

jQueryでplaceholderの値を設定・書き換え・削除するサンプル

jQueryでplaceholderの値を設定・書き換え・削除するサンプルコードです。

まずはhtmlを記述する。今回はボタンで書き換え、削除、デフォルト値の設定を切り替えたいので、入力欄と一緒にボタンに配置しておく。

<!-- 入力欄 -->
<input type="text" id="your-name" name="your-name" value="" size="30" maxlength="50">
<input type="email" id="your-email" name="your-email" value="" size="30" maxlength="255">
<input type="tel" id="your-tel" name="your-tel" value="" size="30" maxlength="25">
<!-- 切り替え用のボタン -->
<button type="button" class="btn btn-info btn-sm" onclick="placeholderChange('1')">書き換え</button>
<button type="button" class="btn btn-info btn-sm" onclick="placeholderChange('2')">削除</button>
<button type="button" class="btn btn-info btn-sm" onclick="placeholderChange('0')">デフォルト</button>

次にjQueryのコードを記述します。ページ読み込み時は、デフォルト値をplaceholderへ設定する。

<script>
$(document).ready(function(){
  placeholderChange('0');
});
var placeholderChange = function (expr) {
  let name = '墨田太郎';
  let email = 'taro@example.com';
  let tel = '03-9999-9999';
  switch (expr) {
    case '1': // 書き換え
      name = '東京花子';
      email = 'hanako@example.net';
      tel = '03-0000-0000';
    case '0': // デフォルト
      $('#your-name').attr('placeholder', name);
      $('#your-email').attr('placeholder', email);
      $('#your-tel').attr('placeholder', tel);
      break;
    case '2': // 削除
      $('#your-name').removeAttr('placeholder');
      $('#your-email').removeAttr('placeholder');
      $('#your-tel').removeAttr('placeholder');
    default:
  }
}
</script>

動作を確認したい場合は「jQueryでplaceholderに値を設定・書き換え・削除するデモページ」へどうぞ。

まとめ

jQueryで「placeholder」に値を設定・書き換え・削除する方法を紹介しました。

思ったより簡単に「placeholder」へ値の設定・書き換え・削除ができてよかったよかった。placeholderは、記入例などの入力に関する案内を設定するためのものだから、書き換えたり削除したりってあまりやらないかもしれないけどね。まあ、必要になったらまたこのページを利用してちょうだいな。

おつかれさまでした。