...

<!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. HashMap扩容和ConcurrentHashMap

    HashMap 存储结构 HashMap是数组+链表+红黑树(1.8)实现的. (1)Node[] table,即哈希桶数组.Node是内部类,实现了Map.Entry接口,本质是键值对. stati ...

  2. SpringBoot 如何进行限流？老鸟们都这么玩的！

    大家好,我是飘渺.SpringBoot老鸟系列的文章已经写了四篇,每篇的阅读反响都还不错,那今天继续给大家带来老鸟系列的第五篇,来聊聊在SpringBoot项目中如何对接口进行限流,有哪些常见的限流算 ...

  3. 从commons-beanutils反序列化到shiro无依赖的漏洞利用

    目录 0 前言 1 环境 2 commons-beanutils反序列化链 2.1 TemplatesImple调用链 2.2 PriorityQueue调用链 2.3 BeanComparator ...

  4. Java秘诀！Java赋值运算符介绍

    运算符丰富是 Java 语言的主要特点之一,它提供的运算符数量之多,在高级语言中是少见的. Java 语言中的运算符除了具有优先级之外,还有结合性的特点.当一个表达式中出现多种运算符时,执行的先后顺序 ...

  5. 基于注解实现jackson动态JsonProperty

    基于注解实现jackson动态JsonProperty @JsonProperty 此注解用于属性上,作用是把该属性的名称序列化为另外一个名称,如把trueName属性序列化为name,但是值是固定的 ...

  6. 北鲲云超算如何让仿真技术、HPC和人工智能之间的深度融合？

    在CAE领域,随着仿真技术在多个行业的深度应用,也带来了仿真模型日益复杂.仿真过程数据倍增.仿真计算费用昂贵等问题,降阶模型.人工智能.云计算等多种技术和仿真技术的深度融合,成为了仿真技术的重要发展趋 ...

  7. SudokuSolver 2.0：用C++实现的数独解题程序 【一】

    SudokuSolver 2.0 实现效果 H:\Read\num\Release>sudoku.exe Order please: Sudoku Solver 2.0 2021/10/2 by ...

  8. 第五课第四周实验一：Embedding_plus_Positional_encoding 嵌入向量加入位置编码

    目录 变压器预处理 包 1 - 位置编码 1.1 - 位置编码可视化 1.2 - 比较位置编码 1.2.1 - 相关性 1.2.2 - 欧几里得距离 2 - 语义嵌入 2.1 - 加载预训练嵌入 2. ...

  9. TortoiseGit使用

    TortoiseGit 前言: 其实作为一名学生,还未接触过企业级开发项目,基本都是一个人在本地敲代码,对于项目管理工具使用的并不多,最常用的命令也就是git clone了,hhh: 前些日子了解了一 ...

  10. Spring Security中配置AccessDeniedHandler没有生效

    现象 在 WebSecurityConfigurerAdapter 配置了如下代码: // 自定义未授权和未登录异常 http.exceptionHandling() .accessDeniedHan ...