How does "go" implement <textarea> placeholder wrap?

Transferred from: http://segmentfault.com/q/1010000002677808

Writes the mobile web, defines a textarea, and adds some hints to the placeholder. Because some phone screens are different, the content of placeholder is not wrapped, but beyond the screen display area.
Previously searched for some content about placeholder, said to be added ward= "hard" property to force a newline (added, invalid.) ) manually set the label wrapping (not suitable for other screen large mobile devices).
How can you let placeholder content can be automatically wrapped?
(PS: It will be wrapped in Computer browser and iphone, but not in Android.) Very strange situation)

The previous blog post, the direct COPY came up.

In HTML5 placeholder , it means a placeholder. Often in the form with some simple words to prompt, friendly prompt user input data.

In the site, a placeholder is defined as a simple hint (a word or a phrase) that helps the user with data entry. If you want to enter a longer hint, it is recommended that you indicate the message next to the current operation instead of using it 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 has a value that is contains no u+000a line FEED (LF) or u+000d carriage RETURN (CR) Chara Cters.

For a longer hint or other advisory text, place the text next to the control.

Source: Http://www.w3.org/html/wg/drafts/html/master/forms.html#the-placeholde ...

If you just want to textarea use attributes in the tag placeholder to implement the word-wrapping prompt, what is the way to achieve it?

The following attempts have been made:

It is not feasible to add various line breaks directly

At first I thought that the direct addition of line break can be achieved, and thus the following results:

<textarea placeholder="單行文本提示" rows="3"></textarea><textarea placeholder="第一行文本提示 \n 第二行文本提示 <br/> 第三行文本提示 \A 第四行文本提示" rows="3"></textarea>

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

The universal CSS Method one

/* WebKit Browsers */::-webkit-input-placeholder{ColorTransparent}::-webkit-input-placeholder: Before{DisplayBlockColor #999;Content "First line text prompt \a second line text prompt \a Third line text prompt \a";}/* Mozilla Firefox 4 to 18 */:-moz-placeholder{ColorTransparent}:-moz-placeholder: Before{DisplayBlockColor #999;Content "First line text prompt \a second line text prompt \a Third line text prompt \a";}/* Mozilla Firefox 19+ */::-moz-placeholder{ColorTransparent}::-moz-placeholder: Before{DisplayBlockColor #999;Content "First line text prompt \a second line text prompt \a Third line text prompt \a";}/* Internet Explorer + */:- Ms-input-placeholder {color: transparent; }:-ms-input-placeholder:before Span class= "Hljs-rules" >{display: Block color: # 999; content:  First line text hint \a second line text hint \a third line text prompt \a ";               /span>         

<iframe width= "100%" height= "+" src= "http://jsfiddle.net/samzeng/2phe5/embedded/result/" allowfullscreen= " allowFullScreen "frameborder=" 0 "></iframe>

Method Two

*WebkitBrowsers * *::-webkit-input-placeholder: After{DisplayBlockContent "The second line text prompt \a The third line text prompt \a";}/* Mozilla Firefox 4 to 18 */:-moz-placeholder: After{DisplayBlockContent "The second line text prompt \a The third line text prompt \a";}/* Mozilla Firefox 19+ */::-moz-placeholder:after {display:< Span class= "Hljs-value" > block; content:  The second line text prompt \a The third line text prompt \a "; }/* Internet Explorer + */:- Ms-input-placeholder:after {display: block; content:  The second line text prompt \a The third line text prompt \a ";               /span>          

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

All-Purpose JavaScript

 //required Jqueryvar placeholder =  The first line text prompt \ n the second line text prompt \ nthe third line text prompt '; $ ( ' textarea '). Val ( placeholder); $ ( ' textarea '). Focus ( function () {if ($ (this). val () = = Placeholder) {$ (this). Val ( ' textarea '). Blur (function< Span class= "Hljs-params" > () {if ($ (this). val () = = this). Val (placeholder);}});       

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

How does "go" implement <textarea> placeholder wrap?