・placeholder(プレースホルダ)って改行できる？
こんな疑問にお答えします。
デザインによっては、テキストエリアのplaceholderが改行されてることありますよね。
初見だとこれできるん？？って思っちゃいます。
実は対応可能です。が、非推奨ではあります。。
いちおうやり方を覚えておこう！
ということで、この記事では「placeholder(プレースホルダ)で改行する方法」について解説していきます！
placeholder(プレースホルダ)で改行する方法
目次
【裏技】placeholder(プレースホルダ)で改行する方法【非推奨】
そんなplaceholder(プレースホルダ)で改行したサンプルがこちら↓
See the Pen placeholderの色を変える by jito-coder (@jito-coder) on CodePen.
ちゃんと改行されていますよね。
やり方は簡単です。
placeholder内に下記の特殊文字を使うだけ。
| | 改行 |
| | 復帰 |
実際に特殊文字を用いたコードがこちらです↓
<tr>
<th>お問い合わせ</th>
<td><textarea name="" cols="50" rows="5" placeholder="こちらに
お問い合わせ内容を
記述ください"></textarea></td>
</tr>「 」や「 」を、テキスト内の改行したい位置に入れればOKです。
消えちゃってますが実際は「こちらに お問い合わせ内容を 記述ください」となっています。
特殊文字を入れれば改行できますが、非推奨なやり方です。
というのもブラウザによっては、反映されないため。
MacのSafariでは改行が反映しません。
そのため全ブラウザで改行させたい場合は、先ほどのやり方では非推奨。
対策は「JavaScript」を使うことです。
【裏技】placeholder(プレースホルダ)で改行する方法【JavaScript編】
そんな「JavaScript」を使った改行方法がこちら↓
See the Pen placeholderのを改行させる➁ by jito-coder (@jito-coder) on CodePen.
<table class="table05">
<tr>
<th>お問い合わせ</th>
<td class="place-box">
<textarea id="area" name="" cols="50" rows="5" placeholder=""></textarea>
<div class="js-placeholder">
こちらに<br>
お問い合わせ内容を<br>
記述ください
</div>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const textarea = $("#area");
const placeholderDiv = $(".js-placeholder");
textarea.on('keyup change', function () {
let letterLength = textarea.val().length;
if (letterLength !== 0) {
placeholderDiv.addClass('hidden');
} else {
placeholderDiv.removeClass('hidden');
}
});
</script>先ほど同様、placeholderが改行されていますよね。
やり方を解説していきます。
まずplaceholder内のテキストを空にしましょう。
<textarea id="area" name="" cols="50" rows="5" placeholder=""></textarea>続いて別部分の文字を、absoluteによってplaceholder位置に動かします。
<td class="place-box">
<textarea id="area" name="" cols="50" rows="5" placeholder=""></textarea>
<div class="js-placeholder">
こちらに<br>
お問い合わせ内容を<br>
記述ください
</div>
</td>.place-box {
position: relative;
}
.js-placeholder {
position: absolute;
top: 5px;
left: 5px;
opacity: .7;
z-index: -1;
}これでdivタグ内の文字が、placeholderの位置に反映させることができました。
あとはテキストエリア内に文字を入力するときに、divタグの文字を非表示にすれば完成です。
そこでJavaScriptを使います。
.js-placeholder.hidden {
display: none;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const textarea = $("#area");
const placeholderDiv = $(".js-placeholder");
textarea.on('keyup change', function () {
let letterLength = textarea.val().length;
if (letterLength !== 0) {
placeholderDiv.addClass('hidden');
} else {
placeholderDiv.removeClass('hidden');
}
});
</script>上記コードにより、入力するときにplaceholder内のテキストを非表示にすることができました。
これで実装完成です。
MacのSafariでもplaceholderを改行させることができます。
【裏技】placeholder(プレースホルダ)で改行する方法【非推奨】：まとめ
- 特殊文字を使えば改行可能
- ただしMacのSafariでは効かない
- 対策方法はJavaScriptを使って実装すること
placeholderで改行したいときは試してみてね！
