让textarea根据文本的长度自动调整它的高度

Posted 2021-03-04 mysterious-killer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让textarea根据文本的长度自动调整它的高度相关的知识，希望对你有一定的参考价值。

...

<!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:100%;border:0;border-radius:5px;background-color:rgba(241,241,241,.98);padding: 10px;resize: none;‘);
 }).on(‘input‘, function () {
     this.style.height = ‘auto‘;
     this.style.height = (this.scrollHeight) + ‘px‘;
     this.style.width = ‘100%‘;
 }); 
</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>

以上是关于让textarea根据文本的长度自动调整它的高度的主要内容，如果未能解决你的问题，请参考以下文章

Angular - Textarea 自动高度不会在文本删除时自动调整大小

如何仅使用 css 不使用 javascript 将 <textarea> 高度自动调整为内部文本的高度？

如何让 textarea 文本框高度自动伸缩

如何使节标题中的 UITextView 将其高度调整为其内容

在 SwiftUI 中根据文本高度自动调整视图高度

让文本框textarea自动适应内容的高度