转自:http://segmentfault.com/q/1010000002677808
写的是移动端的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>