【JavaScript】セレクトした項目ごとにテキストエリアのプレースホルダーを切り替える

2024年02月13日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は簡単にできそうだけど、意外に厄介なtipsを紹介します！

実装例

HTML例

<form action="">
    <div class="select-box">
        <select id="js-select" name="js-select" class="" size="1" tabindex="32">
            <optgroup label="">
                <option value="" data-select="check-none">選択してください</option>
                <option value="ビジネス・インテリジェンス" data-select="check-bi">ビジネス・インテリジェンス</option>
                <option value="ITインフラ・クラウド" data-select="check-infra">ITインフラ・クラウド</option>
                <option value="システム開発" data-select="check-system">システム開発</option>
                <option value="WEB制作・マーケティング" data-select="check-web">WEB制作・マーケティング</option>
                <option value="RPA" data-select="check-rpa">RPA</option>
                <option value="データサイエンス" data-select="check-ds">データサイエンス</option>
                <option value="IoTサービス" data-select="check-iot">IoTサービス</option>
                <option value="その他" data-select="check-other">その他</option>
            </optgroup>
        </select>
    </div>
    <div class="textarea-box">
        <textarea id="js-textarea" name="" class="" cols="50" rows="2" sflength="4000" tabindex="33"></textarea>
        <div id="js-placeholder">お問い合わせ内容をご入力ください</div>
    </div>
</form>

コードを見て、「あれ？placeholder属性を設定しないの？」と思われる方がいるかもしれません。
もちろんplaceholder属性でやる方法もあるのですが、
placeholder属性だと文章の改行ができないんです。
なので、このコードでは疑似placeholderみたいな感じで実装しています。

CSS例

.select-box{
    position: relative;
}
.select-box::before{
    content: "";
    position: absolute;
    left: auto;
    top: 10px;
    bottom: auto;
    right: 10px;
    width: 4px;
    height: 4px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(135deg);
}
#js-select {
    margin: 0 0 20px;
    display: block;
    appearance: none;
    background-color: #fff;
    padding: 2px 2px 1px 7px;
    font-size: 18px;
    border-radius: 3px;
    box-sizing: border-box;
    width: 100%;
}
.textarea-box{
    position: relative;
}
.textarea-box textarea{
    width: calc(100% - 20px);
    height: 240px;
    background-color: #f6f6f6;
    border: 1px solid #cccccc;
    padding: 0 10px;
    line-height: 210%;
}
#js-placeholder{
    position: absolute;
    top: 15px;
    left: 15px;
    line-height: 1.8;
    color: #727272;
    font-size: 18px;
    pointer-events: none;
}
.is-hide{
    display: none;
}

JavaScript例

let placeholderText = 'お問い合わせ内容をご入力ください';
let jsPlaceholder = document.getElementById('js-placeholder');
document.getElementById('js-select').addEventListener('change', function() {
    let val = this.options[this.selectedIndex].getAttribute('data-select');
  switch (val) {
    case 'check-none':
      jsPlaceholder.innerHTML = placeholderText;
      break;
    case 'check-bi':
      jsPlaceholder.innerHTML = placeholderText + '
例）営業支援ツールの導入を検討しており、話を伺いたい。';
      break;
    case 'check-infra':
      jsPlaceholder.innerHTML = placeholderText + '
例）サイバーセキュリティについての資料をメールにていただきたい。';
      break;
    case 'check-system':
      jsPlaceholder.innerHTML = placeholderText + '
例）システム開発についての見積が欲しいため、話を伺いたい。';
      break;
    case 'check-web':
      jsPlaceholder.innerHTML = placeholderText + '
例）WEB制作について協力先を探しており、話を伺いたい。';
      break;
    case 'check-rpa':
      jsPlaceholder.innerHTML = placeholderText + '
例）RPAを使って業務効率化をしたいので話を伺いたい。';
      break;
    case 'check-ds':
      jsPlaceholder.innerHTML = placeholderText + '
例）データ分析、画像解析の技術について話を伺いたい。';
      break;
    case 'check-iot':
      jsPlaceholder.innerHTML = placeholderText + '
例）IoTサービスの導入を検討しており、PoCについて話を伺いたい。';
      break;
    case 'check-other':
      jsPlaceholder.innerHTML = placeholderText;
      break;
  }
});
let textArea = document.getElementById('js-textarea');
textArea.addEventListener('input', function () {
    let letterLength = textArea.value.length;

    if (letterLength !== 0) {
        jsPlaceholder.classList.add('is-hide');
    } else {
        jsPlaceholder.classList.remove('is-hide');
    }
});