让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: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>