Let textarea automatically adjust its height according to the length of the text

...
<! DOCTYPE HTML the PUBLIC "- // the 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 > after textarea fixed width, so that its height textarea automatically adjust the length of the text. </ Title >   
< Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8"  />   
< Script the src = "https://code.jquery.com/jquery-3.4.1 .js " Integrity ="></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>
Let textarea automatically adjust its height according to the length of the text

Guess you like
