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
Docker installation steps for Redmine
Download the image (optional step, if omitted, it...
MySQL query sorting and paging related
Overview It is usually not what we want to presen...
Analyzing Linux high-performance network IO and Reactor model
Table of contents 1. Introduction to basic concep...
React Routing Link Configuration Details
1. Link's to attribute (1) Place the routing ...
A detailed introduction to deploying RabbitMQ environment with docker
Prerequisites: Docker is already installed 1. Fin...
The use of textarea in html and common problems and case analysis
The textarea tag is an HTML tag that we often use....
Demonstration of building ElasticSearch middleware and common interfaces under centos7 in Linux system
1. Introduction to Middleware 1. Basic concepts E...
MySQL startup error 1067 and invalid recovery after changing character set and restarting
Downloaded the unzipped version of mysql-5.6.37-w...
In-depth understanding of Vue's plug-in mechanism and installation details
Preface: When we use Vue, we often use and write ...
How to make your JavaScript functions more elegant
Table of contents Object parameters using destruc...
About browser compatibility issues encountered and solutions (recommended)
Preface: Last Sunday, a senior asked me to help m...
Vue-Element-Admin integrates its own interface to realize login jump
1. First look at the request configuration file, ...
A small introduction to the use of position in HTML
I just learned some html yesterday, and I couldn&#...
CentOS 8 is now available
CentOS 8 is now available! CentOS 8 and RedHat En...
VMware vSAN Getting Started Summary
1. Background 1. Briefly introduce the shared sto...