...
<!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=" 97%;"> <legend> <span>基本信息</span> </legend> <table class="csstable" style="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="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=" 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;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;97%;border-radius:10px;background-color:#FFFFFF;padding: 10px;resize: none;border:1px solid #DCDCDC;');