html textarea文本域高度自适应
冯二爷 2019-07-01
1、可直接在 菜鸟教程网站测试页面中测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<textarea style="width: 200px;padding:0px;"
id="symptomTxt"
oninput="autoTextAreaHeight(this)"
>
</textarea>
</body>
<script type="text/javascript">
//文本域自适应
function autoTextAreaHeight(o) {
o.style.height = o.scrollTop + o.scrollHeight + "px";
}
$(function () {
var ele = document.getElementById("symptomTxt");
autoTextAreaHeight(ele);
})
</script>
</html>2、其实这个段代码有些小瑕疵，输入的时候，高度自适应，但是足字删除输入的内容时，高度就不自适应了
本人改进办法，由于时间仓促，可能不是很好，如果你有好的方式，可以告诉我，在这里谢谢了。
解决：因为文本域宽度200px，测试了下，每行能输入15个汉字，length长度为30。所以我监听输入的长度，当大于30时就追加文本域高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<textarea style="width: 200px;padding:0px;"
id="symptomTxt"
oninput="autoTextAreaHeight(this)"
>
</textarea>
</body>
<script type="text/javascript">
//获取文本长度，一个汉字长度为2
var strLength = {};
strLength.GetLength = function(str) {
return str.replace(/[\u0391-\uFFE5]/g,"aa").length; //先把中文替换成两个字节的英文，在计算长度
};
//文本域自适应
function autoTextAreaHeight(o) {
var element = $(o).val();
var len = strLength.GetLength(element);
var rows = Math.ceil(len/30);
o.style.height = o.scrollTop + 30 + (rows>0?rows-1:rows)*10 + "px";
//o.style.height = o.scrollTop + o.scrollHeight + "px";
}
$(function () {
var ele = document.getElementById("symptomTxt");
autoTextAreaHeight(ele);
})
</script>
</html> 
相关推荐
如狼 0喜欢 / 0评论 2020-08-15
csstpeixun 0喜欢 / 0评论 2020-08-07
anyushan 0喜欢 / 0评论 2020-06-30
zego实时音视频 0喜欢 / 0评论 2020-06-23
oKeYue 0喜欢 / 0评论 2020-06-14
xiaoxiaokeke 0喜欢 / 0评论 2020-05-19
AlisaClass 0喜欢 / 0评论 2020-05-16
Justdoit00 0喜欢 / 0评论 2020-04-26
rionchen 0喜欢 / 0评论 2020-04-09
86384798 0喜欢 / 0评论 2020-04-04
贤冰 0喜欢 / 0评论 2020-03-08
云端漂移 0喜欢 / 0评论 2020-03-05
数据与算法之美 0喜欢 / 0评论 2020-01-23
yuanran0 0喜欢 / 0评论 2019-12-25
nicepainkiller 0喜欢 / 0评论 2019-12-24
mapaler 0喜欢 / 0评论 2019-12-23
CaiKanXP 0喜欢 / 0评论 2019-12-21
wangjie 0喜欢 / 0评论 2019-12-01
我只是个程序员 0喜欢 / 0评论 2014-01-18
huohu00 0喜欢 / 0评论 2013-07-11
lumitzs 0喜欢 / 0评论 2013-08-29
kingzone 0喜欢 / 0评论 2019-11-13
张骞 0喜欢 / 0评论 2014-06-22
dongyang0 0喜欢 / 0评论 2019-11-03
yishujixiaoxiao 0喜欢 / 0评论 2019-11-01
后乐 0喜欢 / 0评论 2014-12-09
来斌 0喜欢 / 0评论 2019-10-08
如狼 0喜欢 / 0评论 2019-09-27
覆雪蓝枫 0喜欢 / 0评论 2015-05-17
Eppley 0喜欢 / 0评论 2019-06-18
贱贱的梦想 0喜欢 / 0评论 2017-10-15
hck0ne 0喜欢 / 0评论 2019-03-09
yixiaof 0喜欢 / 0评论 2019-09-05
liusure0 0喜欢 / 0评论 2007-09-13
不良牛 0喜欢 / 0评论 2007-09-13
前端小讴 0喜欢 / 0评论 2007-09-13
wcssdu 0喜欢 / 0评论 2018-09-21
86384798 0喜欢 / 0评论 2019-09-02
Jiminull 0喜欢 / 0评论 2016-08-15
lwpkjio 0喜欢 / 0评论 2015-11-02
80296630 0喜欢 / 0评论 2015-10-14
edwardhyl 0喜欢 / 0评论 2015-08-18
loverlucky 0喜欢 / 0评论 2016-02-24
后乐 0喜欢 / 0评论 2014-12-09