Home > Others

TextArea the height of the text field changes with the content

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Using CSS to control the height of the textarea text field varies with the content, and no scroll bars appear.
CSS code:

Copy CodeThe code is as follows:
. t_area{
width:300px;
Overflow-y:visible
}
<textarea class= "T_area" >
Whatever you enter here, the height of the textarea will change with the content you enter, no scroll bar, the implementation is very simple, is a css:overflow-y:visible
</textarea>



First of all, in principle to achieve textarea adaptive must apply CSS, not directly applicable to the "width=100%" such as the wording, specific examples:

Copy CodeThe code is as follows:
<style>
TextArea
{
width:100%;
height:100%;
}
</style>
<textarea name= "textarea" >
Xxxxx
</textarea>


Unity in the FF, ie the display effect:
If you use the TextArea property word width (cols) and the number of rows (rows) to control the size of the textarea you will find that in the IE and FF each line of words and text is not the same number of lines, and in the case of insufficient scrolling, IE is the default scroll bar, FF does not have a scroll bar.
How to control textarea in IE and FF in the same effect, in fact, it is relatively simple:
1, the size of the textarea is defined by the width (widht) and height of the textarea;
2, let the scroll bar adaptive: Overflow-y:auto.
TextArea width problem in IE6
The textarea is set to 100% width and is displayed normally in Ie7,firefox. But in IE6, the text is automatically widened.
Workaround: Add a 100%-wide div outside the textarea.
Crazy IE6!!!!
Overflow properties: auto, visible, hidden
Example:
overflow-x:visible;
overflow-y:visible;



Using JS to implement the version


<textarea id="runcode9"><p>textarea Adaptive height </p> <textarea style= ' border:1px solid #94BBE2; width:100%; ' Rows=15 Onpropertychange= ' this.style.posheight=this.scrollheight ' Id=textarea onfocus= ' textarea.style.posheight= This.scrollheight ' > <Br> </textarea></textarea>
Tip: You can modify some of the code before running


CSS implementation version (cannot be executed in standard page, already is cannot add
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
）

Copy CodeThe code is as follows:
<title> text field Adaptive height </title>
<textarea style= "Width:300px;overflow-y:visible" > enter some characters here to see how the Text field automatically scales higher when the height of the first text field is exceeded.



Another JS version textarea adaptive height
The project requires textarea self-adapting height to find this good method on the Internet. Record it and spare it later.

Copy CodeThe code is as follows:
function Bodyonload ()
{
var textarea= document.getElementById ("textarea");
Textarea.style.posheight=textarea.scrollheight;
}


ScrollHeight: Gets the scroll height of the object.
Posheight: Sets or gets the height of the object in the unit specified by the height label property.
Add the method to the body's onload event
<body onload = "bodyonload ();" >
In summary, the compatibility of something with CSS to achieve a little better, but non-standard cases, can only.

TextArea the height of the text field changes with the content

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
get the permalink content of text definition sql server length of text field get height of image html text field value php text field sql server text field

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More