TextArea里Placeholder换行问题

转：http://www.tuicool.com/articles/feYVNf

页面上使用TextArea控件时，会时不时的想给个提示，比如按照一定方式操作之类的。

正常情况下，会使用Placeholder，但这样的提示是不会换行的，无论是用\r\n，还是用<br/>，都不起作用。

前段时间碰到这个问题，一直没有解决，所有页面上的Placeholder都是一行到底，丑死了。

无意中，一个朋友提供了一个方法，完美的解决了问题，贴出来和大家分享一下：

<textarea id="text1" placeholder="Line 1" rows="5"></textarea><textarea id="text2" placeholder="."  rows="5"></textarea>
#text1::-webkit-input-placeholder::after {display:block;content:"Line 2\A Line 3";
}#text2::-webkit-input-placeholder::before {color:#666;content:"Line 1\A Line 2\A Line 3\A";
}

TextArea里Placeholder换行问题相关推荐

textarea的placeholder怎么实现换行-新的方法
大家好,我是南宫. 我最近遇到一个需求,要在之前写过的页面中加上一个textarea,但是我注意到,textarea里面的placeholder在第一行还没有填满的时候换行了,如下图: 怎么实现呢? ...
微信小程序中如何设置textarea或者van-field中的placeholder换行显示
微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可 <textarea class="txt_wor ...
iOS placeholder换行
最近被问到一个奇怪的问题.textarea 里设了placeholder,UI要求换行显示,于是奇怪的问题发生了,他不换行-怎么都不换行. <textarea name="" ...
textarea文本不换行的问题
textarea里的文本手动加了换行在div里展示的时候还是成一行显示,有两种解决办法第一种:比较麻烦但也能实现利用js正则 <body> <textarea name=&qu ...
html中textarea标签的换行
在textarea标签中经常会遇到换行操作,我们该如何获取textarea中的换行保存在数据库中,查看时展示到页面,修改时继续展示到textarea中. 在textarea中换行即使用回车键. htm ...
修改 placeholder 样式，placeholder 换行以及iOS 上设置placeholder被遮挡问题解决
一.修改placeholder样式通过选择器就可以简单的修改该placeholder的样式 input::placeholder{font-size:14px;color: #666666; } 二 ...
SAP LSMW 因物料描述里有换行符或者引号导致数据导入失败
SAP LSMW 因物料描述里有换行符或者引号导致数据导入失败近期,笔者所在的D项目进入第一轮主数据导入的阶段.导入物料主数据由笔者负责. 我的LSMW工具如下方式: 采用的是standard ba ...
textarea中的换行如何展示在页面
textarea中的换行如何展示在页面场景:后台添加标题,想在前台换行展示控制器中:$sTitle = nl2br($sTitle); 视图:{!! $sTitle !!} nl2br():在字符 ...
textarea的placeholder无效问题解决
textarea的placeholder无效问题解决参考文章: (1)textarea的placeholder无效问题解决 (2)https://www.cnblogs.com/Ky-Thompso ...

TextArea里Placeholder换行问题

TextArea里Placeholder换行问题相关推荐

最新文章

热门文章