focus時にplaceholderをinputの上に表示するJavascriptとSCSS

javascript

  ///////////////////////////////////////
  // focus時にplaceholderをinputの上に表示する
  //////////////////////////////////////

  /*
  * 使い方
  *
  * 1. 使いたいフォームに.js-keep-placeholderをつける
  * 2. input要素にユニークなidをつける(id="last_name" など)
  * 3. placeholderは通常通りinput要素に記載すればOK
  *
  * 郵便番号の自動入力など別の入力補助がある場合は
  * setTimeout等を使って入力を待ってからkeepPlaceholderCheckを
  * 実行すると入力後の値を判断してplaceholderの位置を調整します。
  
  例）
  $.when(
    // 先に実行する処理
    ).done(function() { // 先に実行する処理の結果を待ってからplaceholderをチェック
      setTimeout(function(){
       keepPlaceholderCheck();
      },200); //待つ時間(ミリ秒)
    });
  
  */

  //.js-keep-placeholder配下のinput要素をチェックして
  // placeholderをspanに書き換える
  function keepPlaceholderCheck() {
    $('.js-keep-placeholder input').each(function (index, element) {
      input_id = element.id;
      if (input_id !== '') {
        // input要素を取得
        input = $('#' + input_id);
        placeholder = $('#js-keep-placeholder__placeholder-text__' + input_id);
        // input要素のplaceholderを取得
        placeholder_text = this.placeholder;

        // placeholderがある時はspanに書き換える
        if (placeholder_text !== '') {

          // 元々のplaceholderは空にする
          $(input).attr('placeholder', '');

          // inputにvalueが入ってるかを判断して見た目を変える
          if (input.val() === '') {
            $(input).after('' + placeholder_text + '');
          } else {
            $(input).after('' + placeholder_text + '');
          }
        } else {
          // 別のjsで自動入力があった時に値があるかチェックする
          if (placeholder) {
            if (input.val() !== '') {
              placeholder.addClass('js-keep-placeholder__placeholder-text--has-value');
            }
          }
        }
      }
    });
  }

  keepPlaceholderCheck(); //ロード時のチェック

  // inputがからカーソルが当たったときにplaceholderの表示方法を変える
  $('.js-keep-placeholder input').on('focus', function () {
    input_id = this.id;
    if (input_id !== '') {
      // input要素とplaceholderを取得
      input = $('#' + input_id);
      placeholder = $('#js-keep-placeholder__placeholder-text__' + input_id);
      // placeholderとinputに見た目を変えるclassをつける
      placeholder.addClass('js-keep-placeholder__placeholder-text--input-focus js-keep-placeholder__placeholder-text--has-value');
      input.addClass('js-keep-placeholder__input-element--focus');
    }
  });

  // inputがからカーソルが外れたときにplaceholderの表示方法を変える
  $('.js-keep-placeholder input').on('blur', function () {
    input_id = this.id;
    if (input_id !== '') {
      // input要素とplaceholderを取得
      input = $('#' + input_id);
      placeholder = $('#js-keep-placeholder__placeholder-text__' + input_id);
      // placeholderに見た目を変えるclassを外す
      placeholder.removeClass('js-keep-placeholder__placeholder-text--input-focus');
      input.removeClass('js-keep-placeholder__input-element--focus');
      // inputにvalueが空欄の場合はさらにclassを外す
      if (input.val() === '') {
        $(placeholder).removeClass('js-keep-placeholder__placeholder-text--has-value');
      }
    }
  });

scss

/*
* focus時にplaceholderをinputの上に表示する
*/
$colorfocus: $sporange; // focus時の色
.js-keep-placeholder {
  &__input-element--focus {
    border: 2px solid $colorfocus !important;
    background-color: $white !important;
    padding: 5px 10px !important;
  }
  &__placeholder-text {
    position: absolute;
    z-index: 10;
    font-size: 1.6rem;
    top: 0;
    left: 0;
    padding: 8px 12px;
    color: #6c757d;
    line-height: 1.5;
    pointer-events: none;
    transition: all 300ms 0s ease;
    &--has-value,
    &--input-focus {
      top: -6px;
      left: 5px;
      background-color: #fff;
      padding: 0 3px;
      font-size: 1.2rem;
      line-height: 1;
    }
    // --has-value,--input-focus
    &--input-focus {
      color: $colorfocus;
    }
    // --focus
  }
  // __placeholder-text
  .form-group {
    margin-bottom: 15px;
    @include mq(md) {
      margin-bottom: 10px;
    }
  }
  .c-form__form-label {
    margin-bottom: 10px;
    @include mq(md) {
      margin-bottom: 0;
    }
  }
}