TextArea里Placeholder换行问题
页面上使用TextArea控件时,会时不时的想给个提示,比如按照一定方式操作之类的。正常情况下,会使用Placeholder,但这样的提示是不会换行的,无论是用\r\n,还是用<br/>,都不起作用。
前段时间碰到这个问题,一直没有解决,所有页面上的Placeholder都是一行到底,丑死了。
无意中,一个朋友提供了一个方法,完美的解决了问题,贴出来和大家分享一下:
<textarea id="text1" placeholder="Line 1" rows=""></textarea> <textarea id="text2" placeholder="." rows=""></textarea>
#text1::-webkit-input-placeholder::after {
display:block;
content:"Line 2\A Line 3";
} #text2::-webkit-input-placeholder::before {
color:#;
content:"Line 1\A Line 2\A Line 3\A";
}
TextArea里Placeholder换行问题的更多相关文章
- 关于正则表达式处理textarea里的换行
将textarea里的内容存入数据库时,会自动将回车换行符过滤成空格,也会将多个空格转换成一个空格,即:将\n等换成 “ ”存入数据库 因此为了将内容从数据库中按照原来格式读出写入到html 就必须 ...
- textarea 中的换行符问题
下面是我对这个问题的解决过程,最后算是完全搞懂了,真是阴沟里险些翻船 1.必须知道textarea中的换行符是 \n (个人检测发现按回车键是\n,好像在linux下是\r\n) 2.用nl2br之 ...
- textarea之placeholder
placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password.这个属性是html5才有的新 ...
- maxlength属性在textarea里奇怪的表现
HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断. 最近就接到这要一个需求,限制用户最多输入 ...
- 转JS--通过按钮直接把input或者textarea里的值复制到粘贴板里
document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素.当光标未落在页面中任何元素内时,属性值返回body元素. setSel ...
- 微信小程序 fixed 解决 textarea 的 placeholder 不固定问题
当我们把 textarea 放到一个 position:fixed; 中的元素中时. 会发现这个 textarea 也会跟着固定位置,但是 textarea 的 placeholder 内容不会固定, ...
- 详解maxlength属性在textarea里奇怪的表现
这篇文章主要介绍了maxlength属性在textarea里奇怪的表现的相关资料,需要的朋友可以参考下 HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最 ...
- HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式
HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式 兼容性代码: input::-webkit-input ...
- 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法
微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...
随机推荐
- struts2 0day漏洞
描述 Apache Struts2 近日出现一个0day漏洞,该漏洞在修补CVE-2014-0050和2014-0094两个安全漏洞处理不当,分别可以导致服务器受到拒绝服务攻击和被执行恶意代码. 漏洞 ...
- MAC OS中使用ll,la命令
在linux下习惯了使用ll.la等ls别名 用mac os发现没有这样的命令,很不方便. 其实只要在用户目录下建立一个脚本“.bash_profile”,并输入以下内容即可:alias ll='ls ...
- 一级域名301重定向到www二级域名
301重定向有利于百度的搜索 例如一个域名 www.test.com如果不做设置会产生4个网址, (1)test.com(2)www.test.com(3)test.com/default.html( ...
- 正则表达式及re模块
正则表达式使用的特殊符号与字符 元字符 描述 \ 将下一个字符标记符.或一个向后引用.或一个八进制转义符.例如,“\\n”匹配\n.“\n”匹配换行符.序列“\\”匹配“\”而“\(”则匹配“(”.即 ...
- Raising Modulo Numbers(POJ 1995 快速幂)
Raising Modulo Numbers Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 5934 Accepted: ...
- 纯CSS实现三列DIV等高布局
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- JS 的Date对象
原文 http://www.cnblogs.com/towerking/p/3220410.html 一.获取Date对象 在JS中我们可以通过下面一段代码获取本地时间 var currentDate ...
- [置顶] 玩转Eclipse — 自动注释插件JAutodoc
代码注释是一种良好的编程习惯.不管对于他人还是自己,注释都有助于代码的阅读和理解.手动添加注释,是一个非常费时和繁琐的工作,严重影响软件开发效率,这也是绝大多数程序员不愿添加注释的主要原因.JAuto ...
- 百度地图JavaScript API V1.5初级开发工具类
/** * 百度地图使用工具类-v1.5 * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email boo ...
- Single Number 解答
Question Given an array of integers, every element appears twice except for one. Find that single on ...