...

<!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语言练习：hackerrank十五关

    第一关:Hello World C 输入一行字符串(可能含空格),输出hello world\n,字符串 Sample Input 0 Welcome to C programming. Sample ...

  2. 关于我的Visual Studio2017修改安装重试9次失败问题解决

    环境:windows vs2017 现象描述:本来我的vs可用的,一天想暗爪QT,插件安装好了不能创建QT项目,准备升级,然后问题出现了. 过程: 把人弄崩溃了,二三十k的速度在走,半路又终止.根本不 ...

  3. NOIP&CSP 考前 Dev-cpp 的选项问题和考试心态

    (进入考场后您将获得一个崭新的 \(Dev-cpp\),没有中文,没有编译选项,没有缺省源:我还将获得一个崭新的脑子,没有心态,没有智商,没有调试能力--) 中文 \[Step1 \] \[Step2 ...

  4. 创建第一个Android项目

    目录 创建第一个Android项目 创建HelloWorld项目 选择模板 选择模板界面的英文翻译 配置项目 配置项目界面英文翻译及解释 配置项目界面的注意事项 Name的命名规范 Package n ...

  5. python中列表和元组的区别

    列表(list)特点: 1.可变类型且有序的,有索引值. 元组特点: 1.不可变类型且有序的,通过下标索引值访问 2.元组里面只有一个元素的时候该元组类型就是这个元素的类型.例如:t=(1) t的类型 ...

  6. Java（25）常见异常整理

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228418.html 博客主页:https://www.cnblogs.com/testero ...

  7. Java序列初始化

    1.数组 Java数组可以用元素集合初始化: char[] c=new char[]{'.','.','.','.'}; 而想要用指定数量的相同元素来初始化数组,可以使用Arrays.fill()方法 ...

  8. Scrum Meeting 0503

    零.说明 日期:2021-5-3 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 qsy PM&前端 完成登录.后端管理 ...

  9. 【二食堂】Beta - Scrum Meeting 1

    Scrum Meeting 1 例会时间:5.13 18:30~18:50 进度情况 组员 当前进度 今日任务 李健 1. 查阅资料,解决划词勾选和右键菜单的问题issue2. 修复了Alpha阶段的 ...

  10. Go语言核心36讲（Go语言进阶技术八）--学习笔记

    14 | 接口类型的合理运用 前导内容:正确使用接口的基础知识 在 Go 语言的语境中,当我们在谈论"接口"的时候,一定指的是接口类型.因为接口类型与其他数据类型不同,它是没法被实 ...