Web Front-end
HTML Tutorial
How to make the textarea text area width and height width and height automatically adapt
How to make the textarea text area width and height width and height automatically adapt
This time I will bring you how to automatically adapt the width and height of the textarea text area to width and height. What are the precautions?. Here is the actual combat. Let’s take a look at the case.
<HTML>
<HEAD>
<TITLE>textarea宽度、高度自动适应处理方法</TITLE>
<!-- 控制宽度的自动适应 -->
<style type="text/css">
.comments {
width:100%;/*自动适应父布局宽度*/
overflow
:auto;
word-break
:break-all;
/*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，
当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行
属性
“word-break或
word-wrap
”控制其断行)*/
}
</style>
</HEAD>
<BODY>
<FORM METHOD=POST
ACTION
= " ">
<!-- 主要控制高度的自动适应 -->
<!-- 第一个是普通textarea -->
<textarea class="comments" rows="10" cols="10"> </textarea>
<!-- 以下两种方式都可以解决textarea行高自动适应类容的高度 -->
<textarea class="comments" rows=1 name=s1 cols=27 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>
<textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>
</FORM>
</BODY>
</HTML>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
The click event of html hyperlink a jumps to the address pointed to by href
How to Hide a piece of text in HTML
How to display and hide HTML elements through display or visibility
in html How to convert table data to Json format
The above is the detailed content of How to make the textarea text area width and height width and height automatically adapt. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to remove the height attribute of an element with jQuery?
Feb 28, 2024 am 08:39 AM
How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element
How to change the height of br tag?
Sep 11, 2023 pm 05:29 PM
Tags are a commonly used HTML element used to add line breaks in web content. Sometimes, however, the pre-existing height of line discontinuity may be deemed insufficient and the gaps between consecutive lines of written material need to be increased. In this discussion, we'll explore various ways to modify the height of a label, including using the CSS line-height property and adding auxiliary line wrapping elements. Whether you are a junior or an experienced web developer, this manual will give you a comprehensive understanding of how to adjust the height of labels in web design. Methods We will see two different methods to visibly change the height of the br tag. They are as follows - Use CSSline-height property to add extra line breaks Method One: Using CSSline-
How to set textarea read-only
Sep 28, 2023 am 11:17 AM
You can use the readonly attribute, disabled and readwrite attributes to set the textarea read-only. Detailed introduction: 1. readonly attribute, the value of the readonly attribute is readonly; 2. disabled attribute, the content of the <textarea> element cannot be changed, because the value of the disabled attribute is disabled; 3. readwrite attribute, the content of the <textarea> element can Changes and more.
How to Choose a Desk for Adults (Best Choice for Adult Desk Height)
Dec 30, 2023 pm 06:43 PM
The answer to how to choose a desk for adults is as follows: 1. Size and space: When choosing a desk, consider the size and space of the desk so that it is in harmony with the proportion of the room and does not take up too much space. 2. Material and quality: The material and quality of the desk are also important considerations. A wooden desk can provide a sturdy and durable surface, a metal frame can provide stable support, and a glass tabletop can provide a modern feel. 3. Function and organization: Function and organization of the desk are also factors to consider when choosing a desk. Some desks may have drawers or storage cabinets to help you organize books, documents, and other items. 4. Design and style: The design and style of the desk are also factors to consider when choosing a desk. Choosing a desk that matches the style of your home can make your room more coordinated and beautiful
How to make the height of a div tag equal to the height of the browser window using CSS?
Aug 19, 2023 pm 06:01 PM
Whenworkingonwebdevelopmentprojects,thereareoftenscenarioswhereyouneedtogiveadivtagthefullheightofthebrowserwindow.Thiscanbeparticularlyusefulwhencreatingfull-pagelayouts,herosections,orelementsthatneedtospantheentireverticalspace.However,achievingth
How to set table width in HTML?
Sep 06, 2023 pm 11:37 PM
We use inline style attributes to set the width of the table in HTML. This attribute is used within the HTML <table> tag and uses the CSS attribute width to set the width of the table. Syntax Following is the syntax for setting table width in HTML. <tablestyle="width:widthvalueinpercentage">…</table> The Chinese translation of Example is: Example The following is a sample program for setting the width of a table in HTML. <!DOCTYPEhtml><html><style>
Iterative method to find height of binary tree
Sep 06, 2023 am 09:05 AM
Binary tree is a data structure. Each node of a binary tree contains 0, 1 or 2 nodes. Therefore, a binary tree can contain multiple levels. Here we need to write iterative code using loop to find the height of binary tree. The total number of levels of a binary tree represents the height of the binary tree. Alternatively, we can say that the maximum depth of a binary tree from the root node is the height of the binary tree. Problem Statement - We are given a binary tree. We need to use an iterative method to find the height of a given binary tree. Method 1 As we said above, the height of the binary tree is equal to the total number of levels of the binary tree. We will use a queue data structure to iterate through each node of each level and find the maximum depth of the tree. Algorithm step 1 - define the "treeNode" class and add the "val" integer variable
In C++, translate the following into Chinese: Find the rectangle with the smallest difference between length and width
Sep 16, 2023 pm 01:21 PM
A rectangular area is given as input. The goal is to find the sides of the rectangle that minimize the difference between length and width. Area of rectangle = length * width. Example Input − Area = 100 Output − The sides of the rectangle with the smallest difference: length = 10, width = 10 Explanation − The side with area = 100. 2-50, 4-25, 5-20, 10-10. The side with the smallest difference is 10-10, difference = 0. As we all know, a square is a rectangle with all sides equal in length. Input − Area = 254 Output − Sides of rectangle with minimum difference: Length = 127, Width = 2 Explanation - The only possible sides to make a rectangle with area 254 have minimum difference 127 and 2. The method used in the program below is as follows. Here we will find the square root value of the area and traverse from there.
