一、问题描述

textarea为前端常用的文本输入框，有时候需要placeholder的文字提示更加友好，那样提示文字可能就需要换行。

二、原生实现

原生textarea的实现方式如下：

<textarearows="6"style="width: 300px;padding: 0;"placeholder="标题
正文
结尾"
>
</textarea>

是unicode字符中的换行符。

三、vue中实现

在vue中这种写法是无效的

应该是编译过程中unicode字符会被转义

所以我们需要使用v-bind配合\n进行换行

<textarearows="6"style="width: 300px;padding: 0;":placeholder="'标题\n正文\n结尾'"
></textarea>

同样也可以使用模板字符串

<textarearows="6"style="width: 300px;padding: 0;":placeholder="
`标题
正文
结尾`
"
></textarea>

textarea文本框的placeholder文字换行相关推荐

【kindeditor】KindEditor获取多个textarea文本框的值并判断非空
kindeditor官网:http://kindeditor.net/demo.php 如何获取多个KindEditor中textarea文本框的值,方式很多种(带有HTML标签). var intr ...
div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
java 限制文本框长度_[Java教程]如何限制textarea文本框的输入字数
[Java教程]如何限制textarea文本框的输入字数 0 2015-12-24 15:00:10 如何限制textarea文本框的输入字数: 在实际应用中,往往需要限制文本框的输入字数的长度,下面 ...
Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
要在textarea文本框中粘贴图片怎么办？
项目需求: 有一条描述信息(文字 + 图片),点击编辑,文本框中显示描述信息,并且可以对描述信息做出修改拆解需求: 文本框里要能显示预设的值(文字 + 图片) 文本框里还要能支持粘贴文字与图片实际 ...
简单的解决textarea文本框内容换行，对应到页面的内容也换行的问题
当我们在页面上通过 textarea 提交数据的时候,我们输入的内容在提交后都会被处理为了一段内容,即使我们在 textarea 里面输入了很多的换行,提交后也是一段内容,那如果我们需要将我们输入的信 ...
html中文本框的透明度,jQuery实现textarea文本框半透明文本提示效果
jquery实现textarea文本框带有半透明文本提示效果: textarea文本框一般用于编辑大段的文本,比如编辑器或者简单的留言回复之类的功能,有的在textarea文本框的有默认的提示语言. ...
Javascript - 获取到textarea文本框中的回车换行符 - 收集/实践 --- 20201005
1.应用场景主要用于获取到textarea文本框中的回车换行符 2.学习/操作 1. 文档 javascript获取到textarea文本框中的回车换行符 - Wuya - 博客园 js如何识别出字 ...
如何设置textarea文本框中的内容为只读不可修改状态
设置<textarea>文本框中的内容为只读不可修改状态,只需要加入disabled或readonly即可 <textarea name="qualification&qu ...

textarea文本框的placeholder文字换行

textarea文本框的placeholder文字换行

一、问题描述

二、原生实现

三、vue中实现

textarea文本框的placeholder文字换行相关推荐

最新文章

热门文章