textarea placeholder 换行问题处理

APP中嵌入webview时  碰到的文字对齐需求  ----主测 chrome   firefox   safari

第一感觉就是直接在placeholder属性中写入 \n  <br> 之类的 ,然而并没什么用

网上查了下   各种说辞不一, 归纳总结如下:

有效方法列表:

· 类似\n的解决方式   如:

[1]  placeholder="Line 1    Line 2"

[2]   placeholder="Line 1

Line2"      ----这个是随便测试的,因为会打乱代码格式   个人并不推荐

---- chrome 浏览器中测试有效   safari  firefox 无效

·使用 css  ::before   或  ::after  样式实现

<textarea id="textline" placeholder="..." rows="5"></textarea>
<style>
#textline::-webkit-input-placeholder::before {
    display:block;
    color:#666;
    content: "line1 \A line2 \A line3 \A";
}
</style>

---- safari  浏览器中测试有效   chrome  firefox无效

同理 使用  -moz-placeholder    before   after  尝试解决 firefox 浏览器兼容问题

搜索参考了网上的一段css样式     内容如下:

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

然而实际测试发现并没有什么用 -------

不过 到这边   已经解决了  android  及  iOS  嵌入的webview中  placeholder 提示换行问题

就不过度纠结了

其他搜集方法列表:

· 使用js   在定义的字符串中   如: var ph = "line \n  another line \n third line";

然后再赋值到placeholder 属性上

·结合div   css 实现样式覆盖

实现起来感觉比较麻烦  还是算了吧

如果你也碰到了这个问题   看到这个 ,并且方便的解决了  firefox  的兼容问题,欢迎留言交流 :)

时间: 2024-09-30 18:04:27

textarea placeholder 换行问题处理的相关文章

textarea placeholder文字换行

要实现这样的效果 第一反应是直接在placeholder属性值里输入\n换行,如: <textarea rows="5" cols="50" placeholder="1.textarea\n2.success"></textarea> 浏览器直接输出了它,类似地输入<br/>也行不通 解决方法是换成 <textarea rows="5" cols="50" pla

js实现 textArea 的 placeholder 换行

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

【转】如何实现&lt;textarea&gt; placeholder自动换行?

转自:http://segmentfault.com/q/1010000002677808 写的是移动端的web,定义了一个textarea,在placeholder中添加了一些提示语.由于有些手机屏幕不同,placeholder的内容不会自动换行,而是超出了屏幕显示区域.之前搜索过一些关于placeholder换行的内容,说是加入ward="hard"属性强制换行(添加过,无效.)手动设标记换行(对于其他屏幕大移动设备不合适了).请问怎么样可以让placeholder的内容可以自动换

TextArea里Placeholder换行问题

页面上使用TextArea控件时,会时不时的想给个提示,比如按照一定方式操作之类的.正常情况下,会使用Placeholder,但这样的提示是不会换行的,无论是用\r\n,还是用<br/>,都不起作用. 前段时间碰到这个问题,一直没有解决,所有页面上的Placeholder都是一行到底,丑死了. 无意中,一个朋友提供了一个方法,完美的解决了问题,贴出来和大家分享一下: <textarea id="text1" placeholder="Line 1"

textarea内部换行实现

当在使用textarea的时候,有一次需求,需要做到自定义换行,而不是通过textarea定宽来自动换行,其实在html中可以直接通过<br/>来换行,同时也想到用\n来实现换行,其结果是根本不鸟你. <textarea cols="50" rows="5" id="textareaid">"adfsadfs<br/>fddsadfds \n dfadadf"</textarea>

textarea的换行符处理以及正确的在Html中显示

个人不太喜欢在页面做过多的逻辑处理,贴出java的处理方式 1 /** 2 * Html转换为TextArea文本 3 * @return 4 */ 5 public static String HtmlToText(String str) { 6 if (str == null) { 7 return ""; 8 }else if (str.length() == 0) { 9 return ""; 10 } 11 str = str.replaceAll(&qu

html textarea 获取换行显示

参考资料:http://www.cnblogs.com/zhenmingliu/archive/2011/12/27/2303931.html

HTML5的placeholder属性如何实现换行

在HTML5中,placeholder是一个非常有用的属性,当控件中无内容时可以代替UI控件的提示功能,而不需要写额外的代码.但如果有一个textarea控件,我们需要多行的文本提示信息时,使用”\n”, ““均不能实现换行功能:后来在一次无意中的操作,实现了placeholder的换行功能. placeholder的属性值本身包含格式信息,但不能转义字符(如’\n’, ‘\t’),在编辑器中可直接使用回车实现placeholder的换行功能.如:<textarea placeholder=&quo

HTML里面Textarea换行总结

近期碰到一个数据转来转去转到Textrea里面能否真正按行存放的问题,在这里总结一下: 问题描写叙述: 比方get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextArea里面真正按行存放,而不是显示出来按行存放(所谓的真正按行存放就是,再把这个TextArea的数据post到另外一个页面的Textarea里面仍是按行存放) 问题解决1: 一開始是提交数据的时候格式是AAA<BR />BBB,可是这是显示换行,事实上在TextArea里面并非真正按行存放的,由于这个时