textarea宽度、高度自动适应处理方法

简介: textarea自动高度 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

textarea自动高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <TITLE>textarea宽度、高度自动适应处理方法</TITLE> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--/*    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">*/-->
  <!-- 控制宽度的自动适应 -->
  <style type="text/css">
      .comments {
       width:100%;/*自动适应父布局宽度*/
       overflow:auto;
       word-break:break-all;/*在ie中解决断行问题(防止自动变为在一行显示,主要解决ie兼容问题,ie8中当设宽度为100%时,文本域类容超过一行时,当我们双击文本内容就会自动变为一行显示,所以只能用ie的专有断行属性"word-break或word-wrap"控制其断行)*/
      }
      .t_global {
      width:100%;
      }
      .t_left {
 width:80px;
 background-color: #CCC;
      }
      </style>
  </HEAD>

<BODY> 
    <table class="t_global">
        <tr>
            <td class="t_left">审核意见:</td>
            <td>
                <FORM   METHOD=POST   ACTION= " "> 
                    <!-- 第一个是普通textarea -->
                    <textarea class="comments" rows="4" cols="10"> </textarea> 
              </FORM>  
            </td>
        </tr>
        <tr>
            <td class="t_left">审核意见:</td>
            <td>
                <FORM   METHOD=POST   ACTION= " "> 
                    <!-- textarea行高自动适应类容的高度2 -->
                    <textarea class="comments" rows=4   name=s1   cols=27   onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>  
              </FORM>  
            </td>
        </tr>
        <tr>
            <td class="t_left">审核意见:</td>
            <td>
                <FORM   METHOD=POST   ACTION= " "> 
                    <!-- textarea行高自动适应类容的高度3 -->
                    <textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>  
                </FORM>  
            </td>
        </tr>
    </table>
 <textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>  
</BODY> 
</HTML>

 

目录
相关文章
MonacoEditor 主动触发代码提示功能
MonacoEditor是微软提供的代码编辑器 vscode即是使用它作为编辑器。 它的开发语言是ts,可以嵌入到浏览器中。   代码提示或者说代码补全功能是我们经常需要定制的部分。 目前它提供的快捷键是ctrl+space,和win10以下的操作系统的默认中英文切换是冲突的。
6723 0
|
机器学习/深度学习 NoSQL Go
如何进行Go程序的打包发布
如何进行Go程序的打包发布
348 7
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
551 11
|
JavaScript
vue 代码高亮 highlight.js vue-highlightjs
vue 代码高亮 highlight.js vue-highlightjs
330 0
Markdown 拓展 - 对数学公式的支持
MathJax 和 LaTeX 数学公式 支持 MathJax 是一款运行在浏览器中的开源数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析 Latex、MathML 和 ASCIIMathML 的标记语言。MathJax 项目于 2009 年开始,发起人有 American Mathematical Society, Design Science等,还有众多的支持者,个人感觉MathJax会成为今后数学符号渲染引擎中的主流,也许现在已经是了。本文接下来会讲述 MathJax 的基础用法,但不涉及MathJax 的安装及配置。
591 0
Markdown 拓展 - 对数学公式的支持
|
开发框架 .NET C#
C#学习相关系列之Linq用法---group和join相关用法(三)
C#学习相关系列之Linq用法---group和join相关用法(三)
628 1
|
JavaScript 前端开发 算法
深入理解虚拟DOM:原理、优势与实践
深入理解虚拟DOM:原理、优势与实践
1646 0
|
资源调度 数据可视化 前端开发
基于mathlive从零将公式编辑器集成到可视化搭建平台
基于mathlive从零将公式编辑器集成到可视化搭建平台
468 0
|
Android开发 数据安全/隐私保护
autojs输入法
牙叔教程 简单易懂
2484 0
|
SQL JSON 关系型数据库
php执行语句在MySQL批量插入大数据量的解决方案及计算程序执行时间(大数据量、MySQL语句优化)
php执行语句在MySQL批量插入大数据量的解决方案及计算程序执行时间(大数据量、MySQL语句优化)
525 1