Before the company to do the project, there is such a demand, I write a comment box, you can increase the number of comments with the increment and automatically expand, at first I want to use textarea implementation, but later try to find textarea is not suitable, textarea height will not increase with the number of input lines increased , so I went online to seek help, found the great god Zhang Xin Xu this article "div simulation textarea text field easily achieve highly adaptive", successfully solve my problem
The code is as follows:
11<!DOCTYPE HTML>22<HTMLLang= "en">33<Head>44<MetaCharSet= "UTF-8">55<title>Div Simulation textarea adaptive height le>66<styletype= "Text/css">7 7. Test_box{8 8 Width:500px;9 9 Min-height:200px;Ten Ten Max-height:600px; One _height:200px;/*compatible with IE6 browser*/ A margin:0 Auto; - padding:3px; - Outline:0; the Border:1px solid #e4e4e4; - font-size:12px; - Word-wrap:Break-word;/*for English text word wrap, all major browser support*/ - Overflow-x:Hidden; + overflow-y:Auto; - 20-webkit-user-modify:read-write-plaintext-only; + +} A A</style> at23</Head> -24<Body> -25<Divclass= "Test_box"contenteditable= "true">I'm the div of analog textarea.</Div> -26<Scripttype= "Text/javascript"> - - if (typeofDocument.webkithidden== "undefined") { - - //non-Chrome browser blocking paste in inBox.onpaste= function() { - - return false; to to } + + } - - </Script> the34</Body> *35</HTML>
There are one or two properties that have never been seen:
| read-only | content is read-only. |
|---|---|
| read-write | content can be read and written. |
| Read-write-plaintext-only | Content can be read and written, but rich text formatting (such as text color, size, picture, and so on) in the pasted content is lost. Content is similar to displaying in plain text. |
| true | Specifies that element content can be edited. |
|---|---|
| False | Specifies that element content cannot be edited. |
Thanks again for the Great God (http://www.zhangxinxu.com/), shared a lot of very practical experience, and so on in the future can reach his kind of height, I also want to write a good blog to share the benefit of mankind, haha, although still very far, continue to fighting~
DIV Simulation textarea Adaptive height
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
