html在placeholder中加回车,textarea 的 placeholder 如何进行换行?

在 HTML5 placeholder 中，意为占位符。常会在表单中用一些简单的单词进行提示，友好的提示用户录入数据。

在 W3C 中，定义占位符为一个简单的提示(一个词语或一个短语)，在帮助用户进行数据录入。若想录入较长的提示，建议在当前操作旁注明提示信息，而不是使用 placeholder。

倘若硬是想在 textarea 标签中使用 placeholder 属性去实现换行文字提示的话，有什么办法实现呢？

首先

这种写法是无效的。

经过各种试验得出了如下几种解决方法：

1、万能的 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";

}

2、万能的 CSS

* 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

// 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);

}

});