textArea 的 Placeholder 换行问题

Posted on | In |

结论：textArea 的 Placeholder 可以使用
作为换行符

起因是在完成一个在写一个 html 页面的时候，碰到了 textarea 的placeholder 无法换行的问题。

试着用了\n和<br>都不行，最后找到&#10;就好了。

1
2
<textarea type="text" rows="3" placeholder="line1&#10;line2&#10;line3">
</textarea>

参考stackoverflow上的讨论，实际上官方是不支持在 placeholder 里添加多行文字的（因为多行文字不符合 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.

有多行提示的时候使用 title 更好

For a longer hint or other advisory text, the title attribute is more appropriate.

不过还是会碰到需要用多行 placeholder 的情况，有两种解决方法

  1. 添加如下脚本，之后就可以正常使用\n了 

    1
    2
    3
    4
    5
    var textAreas = document.getElementsByTagName('textarea');

    Array.prototype.forEach.call(textAreas, function(elem) {
        elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
    });

  2. 使用&#10;作为换行符