text CUSTOMIZE PLACEHOLDER

Posted 2021-04-29

/*
 *
 * ----------------------------------------------- */
$(function () {
  // onkeyup="this.setAttribute('value', this.value);"

  $('form').on('keyup', '[type="text"], [type="email"], textarea', function (e) {
    var val = $(this).val();

    if (val === '') {
      $(this).parent().removeClass('is-filled');
    } else {
      $(this).parent().addClass('is-filled');
    }

    $(this).attr('value', val);
  });
});



 <div class="form-group">
                <div class="contianer-placeholder">
                    <textarea name="お問い合わせ内容" rows="8" class="form-control"></textarea>
                    <div class="placeholder">お問い合わせ内容</div>
                </div>
            </div>
            
            
            
            
            
            
            
            
            .contianer-placeholder {
  position: relative;
  border-radius: 3px;
  background-color: #fcd979;

  &.is-filled {
    .placeholder {
      display: none;
    }
  }

  .form-control {
    position: relative;
    z-index: 10;
    background-color: transparent;
  }

  .placeholder {
    position: absolute;
    top: 20px;
    z-index: 9;
    width: 100%;
    padding-left: 26px;
    overflow: hidden;
    color: #787878;
    font-size: 16px;
    white-space: nowrap;
  }
}