Textarea text area width and height width and height automatic adaptation implementation code
|
Copy code The code is as follows:<HTML> <HEAD> <TITLE>Textarea width and height automatic adaptation processing method</TITLE> <!-- Automatic adaptation of control width--> <style type="text/css"> .comments { width:100%;/*Automatically adapt to the width of the parent layout*/ overflow:auto; word-break:break-all; /*Solve the line break problem in IE (prevent it from being automatically displayed in one line, mainly to solve the IE compatibility problem. In IE8, when the width is set to 100%, if the text field capacity exceeds one line, When we double-click the text content, it will automatically change to a single line, so we can only use IE's proprietary line break properties "word-break or word-wrap" to control its line break)*/ } </style> </HEAD> <BODY> <FORM METHOD=POST ACTION= " "> <!-- Mainly controls the automatic adaptation of height --> <!-- The first one is a normal textarea --> <textarea class="comments" rows="10" cols="10"> </textarea> <!-- The following two methods can solve the problem of textarea line height automatically adapting to the height of the class content--> <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> |
<<: Three Discussions on Iframe Adaptive Height Code
>>: jQuery solves the problem of not executing the original event after adding elements
Recommend
MySQL 8.0.13 free installation version configuration tutorial under Windows environment
Table of contents Download the compressed file Ad...
Detailed Analysis of the Selection of MySQL Common Index and Unique Index
Suppose a user management system where each perso...
MySql learning day03: connection and query details between data tables
Primary Key: Keyword: primary key Features: canno...
Detailed explanation of the pitfalls of mixing MySQL order by and limit
In MySQL, we often use order by for sorting and l...
Detailed explanation of the difference between MySQL null and not null and null and empty value ''''
I believe that many people who have used MySQL fo...
Tips on disabling IE8 and IE9's compatibility view mode using HTML
Starting from IE 8, IE added a compatibility mode,...
element-ui Mark the coordinate points after uploading the picture
What is element-ui element-ui is a desktop compon...
Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7
Preface Recently, I found a pitfall in upgrading ...
How to expand the disk space of Linux server
Table of contents Preface step Preface Today I fo...
About MySQL 8.0.13 zip package installation method
MySQL 8.0.13 has a data folder by default. This f...
JavaScript to achieve a simple carousel effect
What is a carousel? Carousel: In a module or wind...
Introduction to the use of http-equiv attribute in meta tag
meta is an auxiliary tag in the head area of htm...
HTML cellpadding and cellspacing attributes explained in pictures
Cell -- the content of the table Cell margin (tabl...
Echarts implements switching different X-axes in one graph (example code)
Rendering If you want to achieve the effect shown...
MySQL replication table details and example code
MySQL replication table detailed explanation If w...