【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');
}
});
まとめ
今回もjQueryではなく、Vanilla.jsで実装してみました。
コピペしてガンガン使ってください!
この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。