页面上使用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的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...
随机推荐
-
将Jquery序列化后的表单值转换成Json
From: https://segmentfault.com/a/1190000000473625 小朋友有一个表单,他想以Json的方式获取到表单的内容.小朋友尝试了以下方式. 通过$(" ...
-
C# Http Get 提交请求
/// <summary> /// HTTP GET方式请求数据. /// </summary> /// <param name="url">U ...
- SU Demo之01MakingData--02MultiShot
-
Bomb---hdu5934(连通图 缩点)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5934 题意:有n个炸弹,每个炸弹放在(x, y)这个位置,它能炸的范围是以 r 为半径的圆,手动引爆这 ...
-
ionic2rc版常见的一些坑
1.config.xml里的包名不能有横杠,否则在build android的时候会报错 <widget id="com.ionicframework.name-abc" v ...
-
Hadoop中的辅助类ToolRunner和Configured的用法详解
在开始学习hadoop时,最痛苦的一件事就是难以理解所写程序的执行过程,让我们先来看这个实例,这个测试类ToolRunnerTest继承Configured的基础上实现了Tool接口,下面对其用到的基 ...
-
C++0x对局部静态初始化作出了线程安全的要求,singleton的写法可以回归到最原始的方式
class Foo{public: staticFoo& instance(void) { static Foo s_instance; return s_instance; }}; 以下摘自 ...
-
Xcode 8 控制台输出大量不用的log的问题解决&;&;NSLog失效的解决
Product-->Scheme-->editeScheme中:Auguments中Environment Variable中 Scheme中添加环境变量 "OS_ACTIVIT ...
-
《Python基础教程》第2章读书笔记(1)
# -*- coding:utf-8 -*- #最基本的数据结构:序列,索引从0开始 #python包括6种内建的序列 #最常用的序列包括:列表,元祖 #列表 edward = ['Edward Gu ...
-
SQL Server 查询性能优化——创建索引原则(一)(转载)
索引是什么?索引是提高查询性能的一个重要工具,索引就是把查询语句所需要的少量数据添加到索引分页中,这样访问数据时只要访问少数索引的分页就可以.但是索引对于提高查询性能也不是万能的,也不是建立越多的索引 ...