如何实现<textarea> placeholder自动换行？

Question

写的是移动端的web，定义了一个textarea，在placeholder中添加了一些提示语。由于有些手机屏幕不同，placeholder的内容不会自动换行，而是超出了屏幕显示区域。
之前搜索过一些关于placeholder换行的内容，说是加入ward="hard"属性强制换行（添加过，无效。）手动设标记换行（对于其他屏幕大移动设备不合适了）。
请问怎么样可以让placeholder的内容可以自动换行？
（ps:在电脑浏览器中和iPhone上会自动换行，但在Android内则无法实现。很奇怪的情况）

Answer 1

以前的博文，直接 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 属性去实现换行文字提示的话，有什么办法实现呢？

于是有了以下尝试：

直接添加各种换行符是不可行的

一开始我以为，直接加上换行符就能实现，于是乎有了下面的结果：

html<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

方法一

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>

方法二

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";
}

<iframe width="100%" height="120" src="http://jsfiddle.net/samzeng/s42hj/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

万能的 JavaScript

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>

Answer 2

这是 Android 浏览器中的一个 bug，之前遇到过，没有好的办法，最后用 div 标签 hack 了一下，基本实现了需求，供参考。

javascript(function ($) {
    var test = document.createElement('input');
    var support = 'placeholder' in test && !/android/gi.test(window.navigator.userAgent);

    $.fn.placeholder = function () {
        return this.each(function () {
            if (support) return;

            var $this = $(this);
            var holderText = $this.attr('placeholder');
            var holder = $('<div class="x-placeholder">' + holderText + '</div>');

            holder.css({
                position: 'absolute',
                display: 'none',
                zIndex: 999,
                cursor: 'text',
                wordWrap: 'break-word',
                color: '#bbb'
            });

            $this.after(holder)
                .removeAttr('placeholder')
                .parent().css('position', 'relative');

            $this.bind('focus', function () {
                holder.hide();
            }).bind('blur', function () {
                if ($this.val().length) return;

                var offset = $this.offset();
                var top = (parseInt($this.css('paddingTop'), 10) || 0) + (parseInt($this.css('borderTop'), 10) || 0);
                var left = (parseInt($this.css('paddingLeft'), 10) || 0) + (parseInt($this.css('borderLeft'), 10) || 0);

                holder.css({
                    top: top,
                    left: left,
                    width: $this.width()
                }).show(); 
            }).trigger('blur');

            holder.bind('click', function () {
                $this.focus();
            });
        });
    };
})(jQuery);

// 调用方法
$('textarea').placeholder();