TextArea placeholder handling of line-wrapping problem

Text alignment requirements when embedding WebView in app----main test chrome Firefox safari

The first feeling is to write \ n <br> in the placeholder attribute directly, but it doesn't work.

Online Check the following various rhetoric, summarized as follows:

List of valid methods:

· Similar to \ n solutions such as:

[1] placeholder= "Line 1 & #13;& #10; Line 2 "

[2] placeholder= "Line 1

Line2 "----This is a random test, because it will upset the code format is not recommended by individuals

Test effective safari Firefox in----Chrome browser is invalid

• Using CSS:: Before or:: After style implementation

<textarea id= "Textline" placeholder= "..." rows= "5" ></textarea><style> #textline::-    Webkit-input-placeholder::before {display:block;    Color: #666; Content: "Line1 \a line2 \a line3 \a"; </style>

Test effective chrome Firefox in----Safari browser is invalid

Similarly use-moz-placeholder before after trying to fix Firefox browser compatibility issues

Search reference a section of the Web CSS style content as follows:

/* all */::-webkit-input-placeholder { color: #f00; }::-moz-placeholder {  Color: #f00;  } /* firefox 19+ */:-ms-input-placeholder { color: #f00;  }  /* ie */input:-moz-placeholder { color: #f00;  }/* individual: webkit  */#field2::-webkit-input-placeholder { color: #00f;  } #field3::-webkit-input-placeholder  { color: #090;  background:lightgreen; text-transform:uppercase; } #field4::- webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px ;  color: #999;  }/* individual: mozilla */#field2::-moz-placeholder { color:# 00f; } #field3::-moz-placeholder { color: #090;  background:lightgreen; text-transform: UPPERCASE;&NBSP,} #field4::-moz-placeholder { font-style:italic; text-decoration:overline;  Letter-spacing:3px; coloR: #999;  } 

However, the actual test found no use-------

But it's over here. WebView in Android and IOS embedded placeholder tips for line-wrapping issues

It's not overly tangled.

Additional Collection Methods list:

· Use JS in the defined string such as: var ph = "line \ Another line \ Third line";

And then assign the value to the placeholder property.

• Implement style overlays with Div CSS

It feels more troublesome to realize it, but forget it.

If you have encountered this problem to see this, and convenient to solve the compatibility of Firefox problems, welcome message exchange:)

This article is from the "micro-desire for-micro-life" blog, please be sure to keep this source http://vsfor.blog.51cto.com/4165449/1785746

TextArea placeholder handling of line-wrapping problem