...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>固定textarea的宽度后，让textarea根据文本的长度自动调整它的高度。</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="  crossorigin="anonymous"></script>

    <style type="text/css">

    .csstable {

        border-collapse: collapse;

        margin-top: 10px;

        width: 98%;

    }

    .csstable tr th {

        padding: 3px;

        _padding-bottom: 4px;

        text-align: right;

        background: #F9F9F9;

    }

    .csstable tr td,

    .csstable tr th {

        padding: 6px;

        border: 1px solid #d5d5d5;

        border-collapse: collapse;

        font-weight: 400;

    }

        </style>

</head>  

<body>  

<br>

方法一：

<fieldset style="width: 97%;">

    <legend>

        <span>基本信息</span>

    </legend>

    <table  class="csstable" style="width:76%; margin: 0cm 12% 0cm 12%;">

        <tr>

            <td class="form-label" style="white-space: nowrap;"> <font color="red">*</font>textarea

                <td colspan="3" style="white-space: nowrap;">

                    <textarea id="xf_nrzy" name="xf_nrzy" class="textarea" style="width:100%;background:white;border: 0px;"></textarea></td>

        </tr>

        <tr>

            <td class="form-label" style="white-space: nowrap;"> <font color="red">*</font>textarea

                <td colspan="3" style="white-space: nowrap;">

                    <textarea id="xf_bz" name="xf_bz" class="textarea"

            style="width: 300px;border: 1px solid royalblue;padding: 20px;border-radius: 5px;resize: none;"></textarea></td>

        </tr>

    </table>

</fieldset>

<script type="text/javascript">

$('.textarea').each(function () {

 //border:0;border-radius:5px;background-color:rgba(241,241,241,.98);padding: 10px;resize: none;

     this.setAttribute('style', 'height:' + (this.scrollHeight) 
+ 'px;overflow-y:hidden;width:97%;border-radius:10px;background-color:#FFFFFF;padding: 10px;resize: none;border:1px solid #DCDCDC;');

 }).on('input', function () {

     this.style.height = 'auto';

     this.style.height = (this.scrollHeight) + 'px';

     this.style.width = '97%';

 });

</script>

方法二：

<script type="text/javascript">  

    //*2

    var addHandler = window.addEventListener?

    function(elem,event,handler){elem.addEventListener(event,handler);}:

    function(elem,event,handler){elem.attachEvent("on"+event,handler);};  

    var $ = function(id){return document.getElementById(id);}  

    function autoTextArea(elemid){

        //½һtextareaû߶

        if(!$("_textareacopy")){

            var t = document.createElement("textarea");

            t.id="_textareacopy";

            t.style.position="absolute";

            t.style.left="-9999px";

            document.body.appendChild(t);

        }

        function change(){

            $("_textareacopy").value= $(elemid).value;

            $(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";

        }

        addHandler($("target"),"propertychange",change);//for IE

        addHandler($("target"),"input",change);// for !IE

        $(elemid).style.overflow="hidden";//

        $(elemid).style.resize="none";//

    }  

    addHandler(window,"load",function(){

        autoTextArea("target");

    });

</script>

<textarea id="target" rows="" cols=""></textarea>

</body>

</html>

+ 'px;overflow-y:hidden;width:97%;border-radius:10px;background-color:#FFFFFF;padding: 10px;resize: none;border:1px solid #DCDCDC;');

让textarea根据文本的长度自动调整它的高度的更多相关文章

  1. 消除textarea的空格de长度值

    在项目中因为用到文本域textarea输入textarea的长度总是显示 25 那是还怀疑textarea自带有value长度? placeholder属性的长度? 那时候想到类似:ul无序列表li元 ...

  2. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  3. .Net搭建的WebService测试页使用TextArea大文本框方便调试

    用.Net搭建的WebService,系统默认提供了测试页,供大家输入参数进行测试.但因为参数输入框使用的是单行input控件,导致无法输入换行文本,使得有些参数(如换行的xml)无法输入,及其不便. ...

  4. iOS(Swift) TextField限制输入文本的长度（不是字数）

    最近做项目有一个特殊需求,就是需要限制一个TextField的输入文本的长度在一定范围内(注意,不是字数),上网查了一圈没有找到类似文章,这里把我的方法写进来,mark一下: 1.对TextField ...

  5. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. textarea中文本高亮选中

    最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示: 最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了 ...

  7. Textarea随着文本的字数自适应高度，后来发现用 contenteditable 代替textarea 效果更佳

    做移动端项目遇到很多问题,最近比如textarea 随着文本的字数自动撑开高度, 网上也查阅了一些资料发现比较有用的方法 就是获取 textarea的行数和换行符来动态改变textarea的高度  就 ...

  8. [frontend] 根据文字长度 自适应宽度 自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick

    CSS一行代码就可以解决第一个问题: 1.1 根据文字长度,自适应标签宽度 解决方法:把width的设置删掉,加一行代码 display:table; .tag-footdetail{  /*widt ...

  9. 设置输入域(input/textarea)中文本光标的位置

    以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...

随机推荐

  1. Visual Studio 6.0 在 Windows 10 下崩溃的一种解决方法

    Visual Studio 6.0 下载地址: https://winworldpc.com/product/microsoft-visual-stu/60 安装步骤: https://www.cod ...

  2. Winform 控件命名规范

    前言 最近 Winform 项目做得比较多,控件命名规范上常用的能记住,但是有些总要查,写个记录吧.方便以后自己用,大家也可以参考. 标准控件 序号 控件类型简写 控件类型 1 btn Button ...

  3. ASP.NET Core 学习笔记 第三篇 依赖注入框架的使用

    前言 首先感谢小可爱门的支持,写了这个系列的第二篇后,得到了好多人的鼓励,也更加坚定我把这个系列写完的决心,也能更好的督促自己的学习,分享自己的学习成果.还记得上篇文章中最后提及到,假如服务越来越多怎 ...

  4. SQL 居然还能在 Apache ShardingSphere 上实现这些功能？

    在去年 10 月 5.0.0-alpha 版本发布之后,Apache ShardingSphere 经历了长达 8 个多月的持续开发与优化,终于在 6 月 25 日正式迎来了 5.0.0-beta 版 ...

  5. Geostatistical Analyst Tools（Geostatistical Analyst 工具）

    Geostatistical Analyst 工具 1.使用地统计图层 # Process: GA 图层至格网 arcpy.GALayerToGrid_ga("", 输出表面栅格, ...

  6. 洛谷3195 [HNOI2008]玩具装箱TOY（斜率优化+dp）

    qwq斜率优化好题 第一步还是考虑最朴素的\(dp\) \[dp=dp[j]+(i-j-1+sum[i]-sum[j])^2 \] 设\(f[i]=sum[i]+i\) 那么考虑将上述柿子变成$$dp ...

  7. Python - faker

    安装 faker pip install Faker pip install Dumper 设置生成器 from faker import Faker fake = Faker() 它可以通过访问以想 ...

  8. Windows内核开发-9-32位和64位的区别

    Windows内核开发-9-32位和64位的区别 32位的应用程序可以完美再64位的电脑上运行,而32位的内核驱动无法再64位的电脑上运行,或者64位的驱动无法在32位的应用程序上运行.这是为什么呢. ...

  9. JavaScript 数组 常用方法(二)

    写在前面:续接上篇 JavaScript 数组 常用方法 数组常用方法第二弹来了: some && every 描述: every()与some()方法都是JS中数组的迭代方法. so ...

  10. 解决el-checkbox-group 的v-model无法绑定对象数组

    elementUI官方文档中el-checkbox-group组件绑定的都为一维数组,真实业务中数据绑定往往是多个键值对的对象数组,本文主要解决这个问题. 如下代码: <el-checkbox- ...