DIV Simulation textarea Adaptive height

Source: Internet
Author: User
Tags word wrap

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:

  • -webkit-user-modify:read-only | Read-write | Read-write-plaintext-only
    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.
  • The Contenteditable property specifies whether the contents of an element can be edited.
    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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.