TextArea里Placeholder换行问题

页面上使用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";
}
时间: 2024-10-01 00:31:26

TextArea里Placeholder换行问题的相关文章

js实现 textArea 的 placeholder 换行

今天写textarea的placeholder 换行的方法,网络上找了好多资料,写的不太详细,只好自己写一个demo,现分享给大家.网络上看到方法大概有jQuery的watermark,这种方法可以在chrome中实现,其他浏览器不可以,所以我选择用js实现以下.要点:1,鼠标的焦点事件focus与blur;2,jQuery的input与propertychange事件;当触发这些事件的时候改变textarea的value值;就这么简单,上代码了,拿下来就能用. <!DOCTYPE html>

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

将textarea里的内容存入数据库时,会自动将回车换行符过滤成空格,也会将多个空格转换成一个空格,即:将\n等换成 “  ”存入数据库 因此为了将内容从数据库中按照原来格式读出写入到html 就必须在文本插入数据库之前将 换行符转化成<br /> 本例: content=window.document.getElementById('content'); sub=window.document.getElementsByTagName('form')[0]; sub.onsubmit=fun

textarea 中的换行符问题

下面是我对这个问题的解决过程,最后算是完全搞懂了,真是阴沟里险些翻船 1.必须知道textarea中的换行符是 \n  (个人检测发现按回车键是\n,好像在linux下是\r\n) 2.用nl2br之前,请仔细看好手册解释,我就是搞郁闷了,一般都理解为将\n转换成<br >,其实不是的: 看php手册解释: nl2br –  Inserts HTML line breaks before all newlines in a string Returns string with ‘<br

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

document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素.当光标未落在页面中任何元素内时,属性值返回body元素. setSelectionRange(start, end) 设置选中文本起始位置与结束位置 execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令     点击按钮复制textarea文本框中内容 <script type="text/javascript"> func

maxlength属性在textarea里奇怪的表现

HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断. 最近就接到这要一个需求,限制用户最多输入600字(汉字和字母不区分),对于粘贴的内容也要能自动截断,输入600字后就无法输入. 第一时间想到了maxlength,基本满足需求,但还是有一些怪异的表现. 看下面的代码: <textarea name="text" id="text" maxlength=&

关于(textarea)回车换行符在提交请求(URL)时消失的处理

关于(textarea)回车换行符在提交请求(URL)时消失的处理,有时候,我们在页面输入查询时,想多个同时查询,然后,回车隔开每个查询的内容. 后台只能收到字符串,没有回车换行符. 如下面的一个请求 window.location = "${ctx}/post/cusQueryMailExport?customerId="+customerId +"&postTimeStart="+postTimeStart+"&postTimeEnd=

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

当我们把 textarea 放到一个 position:fixed; 中的元素中时. 会发现这个 textarea 也会跟着固定位置,但是 textarea 的 placeholder 内容不会固定,当滚动页面时,placeholder 的内容会跟着滚动. 如图所示,textarea放在   fixed定位的元素中  上下拖动  问题 解决方案  <textarea type='text' fixed>   加入  fixed   就行啦 原文地址:https://www.cnblogs.co

textarea placeholder 换行问题处理

APP中嵌入webview时  碰到的文字对齐需求  ----主测 chrome   firefox   safari 第一感觉就是直接在placeholder属性中写入 \n  <br> 之类的 ,然而并没什么用 网上查了下   各种说辞不一, 归纳总结如下: 有效方法列表: · 类似\n的解决方式   如: [1]  placeholder="Line 1    Line 2" [2]   placeholder="Line 1 Line2"    

textarea的placeholder属性内容折行显示(PC和移动端端)

1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeholder:after{ display:block; content:"[email protected] \A line#";/* \A 表示换行 */ color:red; }; 火狐 textarea::-moz-placeholder:after{ content:"[