...

<!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. Linux命令行：监视系统IO、内存、CPU、GPU

    [监视IO] Linux18.04自带工具sysstat,其中的iostat可以用于观察IO情况.Linux16.04系统没有默认安装,需要手动安装,安装sysstat时需要下载新的内核(我的原本是1 ...

  2. 【原创】xenomai 在X86平台下中断响应时间测试

    1.中断响应时间 实时操作系统的意义就在于能够在确定的时间内处理各种突发的事件,而中断这些事件.系统抢占调度的触发点,因而衡量嵌入式实时操作系统的最主要.最具有代表性的性能指标参数无疑是中断响应时间. ...

  3. C# 类拓展方法

    C#类拓展方法 要求: 扩展方法类必须为静态类: 拓展方法必须为静态方法,参数为this+需拓展类对象: 多个类拓展方法可以写在一个拓展类中: public class TestExtension { ...

  4. 教你 4 步搭建弹性可扩展的 WebAPI

    作者 | 萧起  阿里云云原生团队 本文整理自<Serverless 技术公开课>,关注"Serverless"公众号,回复"入门",即可获取 Se ...

  5. 通过Swagger文档生成前端service文件，提升前端开发效率

    在企业级的项目开发过程中,一般会采用前后端分离的开发方式,前后端通过api接口进行通信,所以接口文档就显得十分的重要. 目前大多数的公司都会引入Swagger来自动生成文档,大大提高了前后端分离开发的 ...

  6. 前端HTML元素的类型名称

    <div id="content" class="para" style="width:800px;"> <p>He ...

  7. vue3.x组件间通信，实用小技巧都在这里

    本想简单写写,没想到说清楚已经变成了一篇很长的帖子,欢迎当笔记搜藏起来. props / emits 父子组件通信 props一般负责向子组件传递数据 下面是一个简单的例子,父组件向子组件传递了一个t ...

  8. [敏捷软工团队博客]Beta阶段发布声明

    项目 内容 2020春季计算机学院软件工程(罗杰 任健) 博客园班级博客 作业要求 Beta阶段发布声明 我们在这个课程的目标是 在团队合作中锻炼自己 这个作业在哪个具体方面帮助我们实现目标 对Bet ...

  9. Kubernetes集群环境搭建全过程

    资源准备以及服务器初始化 所有服务器执行一下脚本进行配置信息初始化: #!/bin/bash cd `dirname $0` # 关闭selinux setenforce 0 sed -i '/SEL ...

  10. Noip模拟35 2021.8.10

    考试题目变成四道了,貌似确实根本改不完... 不过给了两个小时颓废时间确实很爽(芜湖--) 但是前几天三道题改着不是很费劲的时候为什么不给放松时间, 非要在改不完题的时候颓?? 算了算了不碎碎念了.. ...