页面上使用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换行问题的更多相关文章

  1. 关于正则表达式处理textarea里的换行

    将textarea里的内容存入数据库时,会自动将回车换行符过滤成空格,也会将多个空格转换成一个空格,即:将\n等换成 “  ”存入数据库 因此为了将内容从数据库中按照原来格式读出写入到html 就必须 ...

  2. textarea 中的换行符问题

    下面是我对这个问题的解决过程,最后算是完全搞懂了,真是阴沟里险些翻船 1.必须知道textarea中的换行符是 \n  (个人检测发现按回车键是\n,好像在linux下是\r\n) 2.用nl2br之 ...

  3. textarea之placeholder

    placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password.这个属性是html5才有的新 ...

  4. maxlength属性在textarea里奇怪的表现

    HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断. 最近就接到这要一个需求,限制用户最多输入 ...

  5. 转JS--通过按钮直接把input或者textarea里的值复制到粘贴板里

    document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素.当光标未落在页面中任何元素内时,属性值返回body元素. setSel ...

  6. 微信小程序 fixed 解决 textarea 的 placeholder 不固定问题

    当我们把 textarea 放到一个 position:fixed; 中的元素中时. 会发现这个 textarea 也会跟着固定位置,但是 textarea 的 placeholder 内容不会固定, ...

  7. 详解maxlength属性在textarea里奇怪的表现

    这篇文章主要介绍了maxlength属性在textarea里奇怪的表现的相关资料,需要的朋友可以参考下 HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最 ...

  8. HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

    HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式  兼容性代码: input::-webkit-input ...

  9. 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法

    微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...

随机推荐

  1. MySQL游标操作指南

    本篇文章是对MySQL游标的具体使用进行了详细的分析介绍,需要的朋友参考下   测试表 level  代码如下: create table test.level (name varchar(20)); ...

  2. 发布(Windows)

    发布(Windows) 本篇将在这个系列演示的例子上继续记录Asp.Net Core在Windows上发布的过程. Asp.Net Core在Windows上可以采用两种运行方式.一种是自托管运行,另 ...

  3. 禁用物料不允许BOM

    应用 Oracle Bill Of   Materiel 层 Level Function 函数名 Funcgtion Name BOM_BOMFDBOM 表单名 Form Name BOMFDBOM ...

  4. JVM启动参数手册——JVM之八

    jdk1.4.2 JVM官方地址:http://java.sun.com/j2se/1.4.2/docs/guide/vm/index.html 标准和非标注参数(for windows):http: ...

  5. BZOJ 2301 Problem B(莫比乌斯反演)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2301 题意:给a,b,c,d,k,求gcd(x,y)==k的个数(a<=x<=b,c&l ...

  6. .net 反编译利器 dnspy

    Binaries Latest release: https://github.com/0xd4d/dnSpy/releases Latest build (possibly unstable): h ...

  7. 剑指offer-面试题5.从尾到头打印链表

    题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值. 刚看到这道题的小伙伴可能就会想,这还不简单,将链表反转输出. 但是这种情况破坏了链表的结构. 如果面试官要求不破坏链表结构呢,这时候我们 ...

  8. libcurl 多线程使用注意事项 - Balder~专栏 - 博客频道 - CSDN.NET

    libcurl 多线程使用注意事项 - Balder~专栏 - 博客频道 - CSDN.NET libcurl 多线程使用注意事项 分类: C/C++学习 2012-05-24 18:48 2843人 ...

  9. Innobackupex 全备数据库

    对于MySQL数据库的热备.xtrabackup是除了MySQL enterprise backup之外的不二之选. 该工具提供了基于innodb存储引擎的热备.支持全量,增量备份,部分备份,时点恢复 ...

  10. weblogic8.1在myeclipse中启动正常,在单独的weblogic中无法正常启动的解决方案.

    应用程序服务器weblogic8.1.5,项目在myeclipse中启动正常,在单独的服务器中启动就报错了.错误如下图: 经过观察,发现在myeclipse中设置了以下的jar包.估计是这个问题引起的 ...