...

<!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. 【C++ Primer Plus】编程练习答案——第7章

    1 double ch7_1_harmonicaverage(double a, double b) { 2 return 2 / (1 / a + 1 / b); 3 } 4 5 void ch7_ ...

  2. Mac里存储空间不足，该怎么删垃圾数据？

    说明:在mac设备运行一段时间后,电脑空间很小了,对于开发者来说,清清Xcode缓存,腾出几十G的空间还是有可能的.在升级Xcode适配新系统.新手机也是得给电脑减减压. 一.Xcode缓存文件(co ...

  3. 题解 「2017 山东一轮集训 Day7」逆序对

    题目传送门 Description 给定 $ n, k $,请求出长度为 $ n $ 的逆序对数恰好为 $ k $ 的排列的个数.答案对 $ 10 ^ 9 + 7 $ 取模. 对于一个长度为 $ n ...

  4. 告别Vuex，发挥compositionAPI的优势，打造Vue3专用的轻量级状态

    Vuex 的遗憾 Vuex 是基于 Vue2 的 option API 设计的,因为 optionAPI 的一些先天问题,所以导致 Vuex 不得不用各种方式来补救,于是就出现了 getter.mut ...

  5. UltraSoft - Beta - Scrum Meeting 4

    Date: May 20th, 2020. Scrum 情况汇报 进度情况 组员 负责 今日进度 q2l PM.后端 完成了课程中心对课程提醒的爬虫 Liuzh 前端 修改DDL列表中起始时间为课程名 ...

  6. [对对子队]会议记录4.11(Scrum Meeting 2)

    今天已完成的工作 何瑞 ​ 工作内容:完成指令的衔接:完成合成指南界面的制作:初步实现成本系统 ​ 相关issue:实现用户指令编辑系统的逻辑 马嘉 ​ 工作内容:完成游戏内暂停界面 ​ 相关issu ...

  7. [对对子队]会议记录4.19(Scrum Meeting10)

    今天已完成的工作 何瑞 ​ 工作内容:搭建第2关,基本完成第3关 ​ 相关issue:搭建关卡2.3 ​ 相关签入:4.19签入1 4.19签入2 刘子航 ​ 工作内容:完成关卡选择界面的设计图 ​ ...

  8. DDD领域驱动设计-案例建模设计-Ⅲ

    1. 背景 参考<DDD领域驱动设计-案例需求文档>,本文将构建实体,聚合根详述领域驱动中的建模设计.构建实体,聚合根的一些原则或方法,将在后续文章中说明. 2. 建模设计 2.1. 实体 ...

  9. [HNOI2009]双递增序列（洛谷P4728）+小烈送菜（内部训练题）——奇妙的dp

    博主学习本题的经过嘤嘤嘤: 7.22 : 听学长讲(一知半解)--自己推(推不出来)--网上看题解--以为自己会了(网上题解是错的)--发现错误以后又自己推(没推出来)--给学长发邮件--得到正确解法 ...

  10. 电脑cmd命令快速查看连接过的WIFI密码信息

    只是突然发现,好奇心作怪,试了一下,妈妈再也不用担心我忘记家里的wifi密码了 1.直接打开"运行"(win键+R) 2.输入CMD 确定 3.输入下面cmd命令.鼠标粘贴 for ...