お仕事のご相談はこちら
  • TOP
  • スマホ時にのみplaceholderを設定する方法（超シンプル）

最終更新日：

スマホ時にのみplaceholderを設定する方法（超シンプル）

スマホ時にのみplaceholderを設定する方法

こんにちは。五平餅くんです。

inputを使うコーディングでは時々、スマホ時だけplaceholderを設定しなければならない時があります。

placeholderとは、inputやtextareaを入力前にだけ表示されるテキストです。placeholderは、入力を開始すると消えて、入力値を空にすると再度現れます。

さて、スマホ時だけplaceholderを設定しなければならない状況とは、例えばこのようなデザインです。

PC時。「※半角数字のみ」が外に飛び出ている
PC時。「※半角数字のみ」が外に飛び出ている
スマホ時。「※半角数字のみ」がplaceholderに設定されている
スマホ時。「※半角数字のみ」がplaceholderに設定されている

この時、以前はplaceholderを自作して、それをスマホ時のみ表示する形で対応しておりました。

しかし、もっと良いシンプルな方法を思いつきましたので記しておきます。

それは、「PCだけplaceholderの色を透明にする」方法です。

PCだけplaceholderの色を透明にする

実際のコードはこのようになります。

<div class="inner">
  <input type="text" name="test" class="d-input sp-only-placeholder" placeholder="※半角数字のみ"><span class="d-txt pc-only-chuigaki">  ※半角数字のみ</span>
</div>

/* リセット */
p {
  margin: 0;
  padding: 0;
}

/* 基本設定 */
.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

/*　基本設定 */

.d-input {
  width: 400px;
  height: 45px;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.d-txt {
  color: #888;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .pc-only-chuigaki {
    display: none;
  }
}


/*　ここから重要！ */
.sp-only-placeholder::placeholder {
  color: transparent;
}
/* IE */
.sp-only-placeholder:-ms-input-placeholder {
  color: transparent;
}
/* Edge */
.sp-only-placeholder::-ms-input-placeholder {
  color: transparent;
}

@media screen and (max-width: 767px) {
  .sp-only-placeholder::placeholder {
    color: #ccc;
  }
  /* IE */
  .sp-only-placeholder:-ms-input-placeholder {
    color: #ccc;
  }
  /* Edge */
  .sp-only-placeholder::-ms-input-placeholder {
    color: #ccc;
  }
}
デモはこちら

※上のデモを開いて画面を縮めてみてください。

解説

PC表示

この部分はPC表示になります。

.sp-only-placeholder::placeholder {
  color: transparent;
}
/* IE */
.sp-only-placeholder:-ms-input-placeholder {
  color: transparent;
}
/* Edge */
.sp-only-placeholder::-ms-input-placeholder {
  color: transparent;
}

「セレクタ::placeholder」でplaceholderのスタイルを設定できます。

「:-ms-input-placeholder」はIE、「::-ms-input-placeholder」でEdge（旧）にも一応対応しております。

ここでは、「color: transparent」つまりplaceholderの文字色を透明に変更しております。

よって、PCでは見えないということになっております。

スマホ表示

@media screen and (max-width: 767px) {
  .sp-only-placeholder::placeholder {
    color: #ccc;
  }
  /* IE */
  .sp-only-placeholder:-ms-input-placeholder {
    color: #ccc;
  }
  /* Edge */
  .sp-only-placeholder::-ms-input-placeholder {
    color: #ccc;
  }
}

@media screen and (max-width: 767px) { }で囲めば、「767px以下の画面幅の時」という設定ができます。

そして今度は、「::placeholder」の文字色を変更します。color: #ccc

こうすることでスマホ時（767px以下の画面幅の時）のみ、placeholderの文字色が#cccになります。

つまり、placeholderが現れるということになります。

ちなみに、PC時にinputの隣にいた「※半角数字のみ」のテキストは、cssの少し上の方でスマホ時に非表示の設定を行っています。

@media screen and (max-width: 767px) {
  .pc-only-chuigaki {
    display: none;
  }
}

これでスマホ時のみplaceholderが表示されるデザインが再現できました！

おまけ：placeholderを自作してスマホ時のみ表示する方法

こちらは飛ばしていただいて問題ありません！

以前にやっていた少し複雑な方法です。

<div class="inner">
  <div class="sp-only-placeholder">
    <input type="text" name="test" class="d-input js-sp-only-placeholder__input"><span class="d-txt pc-only-chuigaki">  ※半角数字のみ</span>
    <div class="sp-only-placeholder__txt js-sp-only-placeholder__txt">
      <p class="d-txt">半角数字</p>
    </div>
  </div>
</div>

/* リセット */
p {
  margin: 0;
  padding: 0;
}

/* 基本設定 */
.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

/*　基本設定 */

.d-input {
  width: 400px;
  height: 45px;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.d-txt {
  color: #888;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .pc-only-chuigaki {
    display: none;
  }
}


/*　ここから重要！ */
.sp-only-placeholder {
  position: relative;
}

.sp-only-placeholder__txt {
  position: absolute;
  left: 15px;
  top: .75em;
  pointer-events: none;
  white-space: nowrap;
  color: #ccc;
}

/* 入力された時適用されるスタイル */
.sp-only-placeholder__txt.hide {
  display: none;
}

@media screen and (min-width: 768px) {
  .sp-only-placeholder__txt {
    display: none;
  }
}

※CSSの「/* ここから重要！ */」より上は全く同じです。

$(function() {
  $('.js-sp-only-placeholder__input').on('keyup change', function() {
    // inputの文字を数える
    let length = $('.js-sp-only-placeholder__input').val().length;
    if (length !== 0) {
      $('.js-sp-only-placeholder__txt').addClass('hide');
    } else {
      $('.js-sp-only-placeholder__txt').removeClass('hide');
    }
  });
});

※jQueryの使用を想定しています。

デモはこちら

解説

この部分がplaceholderにあたります。

    <div class="sp-only-placeholder__txt js-sp-only-placeholder__txt">
      <p class="d-txt">半角数字</p>
    </div>
.sp-only-placeholder {
  position: relative;
}

.sp-only-placeholder__txt {
  position: absolute;
  left: 15px;
  top: .75em;
  pointer-events: none;
  white-space: nowrap;
  color: #ccc;
}

それをposition: absoluteでinputの上におき、placeholderのように見せます。

そしてJavaScriptで、挙動を作ります。

$(function() {
  $('.js-sp-only-placeholder__input').on('keyup change', function() {
    // inputの文字を数える
    let length = $('.js-sp-only-placeholder__input').val().length;
    if (length !== 0) {
      $('.js-sp-only-placeholder__txt').addClass('hide');
    } else {
      $('.js-sp-only-placeholder__txt').removeClass('hide');
    }
  });
});

$(‘.js-sp-only-placeholder__input’).on(‘keyup change’, function() { }で「inputへ入力時に」というイベントができます。

let length = $(‘.js-sp-only-placeholder__input’).val().lengthで文字数を計測。

if (length !== 0)は、その文字数が0でない時、つまり何かしら入力されている時、
placeholder部分（.js-sp-only-placeholder__txt）に「hide」というclassを付与します。

0の時にはplaceholder部分（.js-sp-only-placeholder__txt）に「hide」というclassを取り除きます。

そしてplaceholder部分（.js-sp-only-placeholder__txt）にhideというclassがついた時のスタイルはcssに記述しております。

※classの「js-sp-only-placeholder__txt」はJavaScript用のセレクタに、「sp-only-placeholder__txt」はcss用のセレクタに使用しております。

/* 入力された時適用されるスタイル */
.sp-only-placeholder__txt.hide {
  display: none;
}

hideというclassがついた時はdisplay: none（非表示）になります。

そしてplaceholder部分はPC時に表示しないので、下記を記述します。

@media screen and (min-width: 768px) {
  .sp-only-placeholder__txt {
    display: none;
  }
}

これで、placeholderを自作しつつスマホ時のみ表示するスタイルが完成です。

しかしこちらだと、htmlとcssが複雑になり、JavaScriptまで書かないといけないので面倒ですね。

よほどの理由がない限り使わないと思います。

とはいえplaceholderを自作すると、placeholderの動きなどをブラウザの仕様に依存せず自由に指定できるようになるので、「placeholderの自作」は必要な場合もあります。

今回はないですが、例えばフォーカス時にplaceholderのアニメーションを作るなどの場合は、placeholderの自作が必要です。

こちらについてはのちに記事にします。

まとめ：意外と簡単に実装できた

以前スマホ時のみplaceholderを表示する方法を調べてもなかなかでてこず、placeholderを自作してそれをPCで非表示にする方法しかないと思っておりました。

しかし、単純に「文字色を透明にする＝非表示」ということに気が付きませんでした。

厳密には、「表示はされているけど文字色が透明だから見えない」ということになりますがユーザーにしてみたら非表示と同じことです。

今回ご紹介した方法は、cssのみで軽くシンプルに実装できるので、もしスマホ時のみplaceholderを表示しなければならない状況になりましたらぜひご活用いただけますと幸いです。

最後まで読んでいただきありがとうございました！

関連記事

人気記事

カテゴリー

五平餅くんとは？

五平餅くんのイラスト

フリーランス５年目のHTMLコーダー。常に実務を意識した発信をして参ります！

プロフィールはこちら