如何在Bootstrap-Vue的textarea中设置多行placeholder？

嘿，我刚好解决过类似的问题！Bootstrap-Vue的textarea组件本质上是基于原生textarea封装的，直接在placeholder属性里写普通换行符（比如\n）确实不会生效，不过有两种很实用的方法可以实现多行提示：

方法1：使用HTML换行实体 #

HTML属性里的换行需要用实体字符来表示，我们可以用
（换行符）或者
（回车+换行组合）来实现多行效果，这种方法不需要额外CSS，简单直接：

<b-form-textarea
  placeholder="第一行输入提示&#10;第二行输入提示&#10;第三行可以写更多说明"
></b-form-textarea>

大部分现代浏览器都能完美识别这种实体换行，效果和原生textarea的多行placeholder一致。

方法2：通过CSS伪元素自定义样式 #

如果需要对不同行的提示文本做样式调整（比如颜色、缩进），可以用CSS的::placeholder伪元素，配合white-space属性来识别换行：

首先添加自定义CSS：

.multiline-placeholder::placeholder {
  white-space: pre-line; /* 识别换行并自动换行 */
  color: #6c757d; /* 可选：自定义提示文本颜色，和Bootstrap默认风格一致 */
}

然后在组件里使用这个类，并在placeholder中直接写换行（或者用\n）：

<b-form-textarea
  class="multiline-placeholder"
  placeholder="第一行提示内容
第二行可以写更详细的要求
第三行比如：请不要输入敏感信息"
></b-form-textarea>

这种方法的优势是灵活性更高，能自定义placeholder的样式，不过要注意部分老旧浏览器对::placeholder伪元素的支持可能有限，但主流浏览器（Chrome、Firefox、Edge等）都没问题。

小提示 #

Bootstrap-Vue的b-form-textarea最终会渲染成原生的<textarea>标签，所以所有适用于原生textarea的多行placeholder方法，都可以直接套用在它上面哦！

内容的提问来源于stack exchange，提问作者lgc_ustc