在 HTML5 placeholder 中，意为占位符。常会在表单中用一些简单的单词进行提示，友好的提示用户录入数据。
在 W3C 中，定义占位符为一个简单的提示（一个词语或一个短语），在帮助用户进行数据录入。若想录入较长的提示，建议在当前操作旁注明提示信息，而不是使用 placeholder。
倘若硬是想在 textarea 标签中使用 placeholder 属性去实现换行文字提示的话，有什么办法实现呢？
首先
|
1 |
<textarea placeholder="this is line 1\n this is line 2\n this is line 3"></textarea> |
这种写法是无效的。
经过各种试验得出了如下几种解决方法：
1、万能的 CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* 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"; } |
2、万能的 CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
* 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"; } |
3、万能的 JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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); } }); |
