【转】如何实现<textarea> placeholder自动换行?
2015-05-09 16:41
525 查看
转自:http://segmentfault.com/q/1010000002677808
写的是移动端的web,定义了一个textarea,在placeholder中添加了一些提示语。由于有些手机屏幕不同,placeholder的内容不会自动换行,而是超出了屏幕显示区域。
之前搜索过一些关于placeholder换行的内容,说是加入ward="hard"属性强制换行(添加过,无效。)手动设标记换行(对于其他屏幕大移动设备不合适了)。
请问怎么样可以让placeholder的内容可以自动换行?
(ps:在电脑浏览器中和iPhone上会自动换行,但在Android内则无法实现。很奇怪的情况)
以前的博文,直接 COPY 上来了。
在 HTML5
在 W3C 中,定义占位符为一个简单的提示(一个词语或一个短语),在帮助用户进行数据录入。若想录入较长的提示,建议在当前操作旁注明提示信息,而不是使用
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
For a longer hint or other advisory text, place the text next to the control.
来源:http://www.w3.org/html/wg/drafts/html/master/forms.html#the-placeholde...
倘若硬是想在
于是有了以下尝试:
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/G276g/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/2phe5/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/s42hj/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/vrGXa/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
写的是移动端的web,定义了一个textarea,在placeholder中添加了一些提示语。由于有些手机屏幕不同,placeholder的内容不会自动换行,而是超出了屏幕显示区域。
之前搜索过一些关于placeholder换行的内容,说是加入ward="hard"属性强制换行(添加过,无效。)手动设标记换行(对于其他屏幕大移动设备不合适了)。
请问怎么样可以让placeholder的内容可以自动换行?
(ps:在电脑浏览器中和iPhone上会自动换行,但在Android内则无法实现。很奇怪的情况)
以前的博文,直接 COPY 上来了。
在 HTML5
placeholder中,意为占位符。常会在表单中用一些简单的单词进行提示,友好的提示用户录入数据。
在 W3C 中,定义占位符为一个简单的提示(一个词语或一个短语),在帮助用户进行数据录入。若想录入较长的提示,建议在当前操作旁注明提示信息,而不是使用
placeholder。
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
For a longer hint or other advisory text, place the text next to the control.
来源:http://www.w3.org/html/wg/drafts/html/master/forms.html#the-placeholde...
倘若硬是想在
textarea标签中使用
placeholder属性去实现换行文字提示的话,有什么办法实现呢?
于是有了以下尝试:
直接添加各种换行符是不可行的
一开始我以为,直接加上换行符就能实现,于是乎有了下面的结果:<textarea placeholder="單行文本提示" rows="3"></textarea> <textarea placeholder="第一行文本提示 \n 第二行文本提示 <br/> 第三行文本提示 \A 第四行文本提示" rows="3"></textarea>
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/G276g/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
万能的 CSS
方法一
/* WebKit browsers */ ::-webkit-input-placeholder { color: transparent; } ::-webkit-input-placeholder:before { display: block; color: #999; content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A"; } /* Mozilla Firefox 4 to 18 */ :-moz-placeholder { color: transparent; } :-moz-placeholder:before { display: block; color: #999; content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A"; } /* Mozilla Firefox 19+ */ ::-moz-placeholder { color: transparent; } ::-moz-placeholder:before { display: block; color: #999; content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A"; } /* Internet Explorer 10+ */ :-ms-input-placeholder { color: transparent; } :-ms-input-placeholder:before { display: block; color: #999; content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A"; }
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/2phe5/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
方法二
* WebKit browsers */ ::-webkit-input-placeholder:after { display: block; content: "第二行文本提示 \A 第三行文本提示 \A"; } /* Mozilla Firefox 4 to 18 */ :-moz-placeholder:after { display: block; content: "第二行文本提示 \A 第三行文本提示 \A"; } /* Mozilla Firefox 19+ */ ::-moz-placeholder:after { display: block; content: "第二行文本提示 \A 第三行文本提示 \A"; } /* Internet Explorer 10+ */ :-ms-input-placeholder:after { display: block; content: "第二行文本提示 \A 第三行文本提示 \A"; }
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/s42hj/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
万能的 JavaScript
// required jQuery var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示'; $('textarea').val(placeholder); $('textarea').focus(function() { if ($(this).val() == placeholder) { $(this).val(''); } }); $('textarea').blur(function() { if ($(this).val() == '') { $(this).val(placeholder); } });
<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/vrGXa/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
相关文章推荐
- 如何让html 标签<textarea>文本域 在Opera浏览器下自动换行
- 在.Net的WinForm开发中如何实现控件随窗体大小的改变而自动适应其改变<收藏>
- Jsp中 table 使用<c:forEach>实现各行3个,之后自动换行
- <pre>标签里面的内容实现自动换行(默认不会自动换行)
- 在<table>或<div>中如何让传入的文本自动换行
- 如何删除strut2校验后<s:fielderror>在jsp页面输出时的小黑点和自动换行?
- 黄聪:wordpress如何防止发布文章时候自动清除<P>、<br>换行标签
- 如何删除strut2校验后<s:fielderror>在jsp页面输出时的小黑点和自动换行?
- Jsp中 table 使用<c:forEach>实现各行3个,之后自动换行
- 如何使<pre>元素里的内容自动换行
- Jquery实现<textarea>根据内容自动改变大小
- 在<table>或<div>中如何让传入的文本自动换行
- jquery实现(textarea)placeholder自动换行
- UILabel 多行显示<自动换行>
- 如何实现IEnumerable<T>和IEnumerator接口,一个ASP.NET MVC日志模型的实现
- JavaSE8基础 文档注释中 使用<br />实现换行效果
- Lucene 如何实现高性能 GroupBy <二>
- 如何实现<div>中元素上下对齐
- HTML5的placeholder属性如何实现换行
- SPRING源码学习之路(三)——<aop:config>自动代理的实现