textarea的高度根据键入的长度自适应高度,利用input事件,获取长度和设置高度;
document.getElementById("text-adaption").addEventListener("input", function(event) {
this.style.height = this.scrollHeight + "px";
document.getElementById("textvalue").innerHTML = this.value.length + "/150";
});
核心代码就是上面这个;
将textarea的高度设置为滚动条的高度,然后再设置一个最长久OK了
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
textarea{
width: 100%;
border: 0;
padding: 1em;
background-color: #EFEFF4;
height: auto;
}
.hbg{
background-color: #7DB1FD;
}
.hbg a,.hbg h1{
color: white;
}
.fbut{
width: 100%;
position:fixed;
bottom:0;
text-align: center;
}
#sub{
width: 100%;
margin: auto;
background-color: #7DB1FD;
border: 1px solid #7DB1FD;
line-height: 2;
}
#textvalue{
padding: 1em;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav hbg">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">设置简介</h1>
</header>
<div class="mui-content">
<div class="main" id="app">
<div >
<textarea id="text-adaption" rows="" cols="" maxlength="150" placeholder="用一段话介绍一下自己吧(建议150字以内)">
</textarea>
<div id="textvalue">
</div>
</div>
<div class="fbut">
<button type="button" id="sub" class="mui-btn mui-btn-blue">保存</button>
</div>
</div>
</div>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
$("#sub").bind("tap",function(){
let value = document.getElementById("text-adaption").value;
let data = {
url:"/api/Personal/update_member",
data:{
access_token : acctoken()||"",
nickname : "",
introduction : value||"",
mid : ""
}
};
ajax(data,function(res){
console.log(res);
if(res.code == -1){
mui.toast(res.message);
}
if(res.code == 1){
mui.toast("修改成功")
}
})
})
// 注册change事件
document.getElementById("text-adaption").addEventListener("input", function(event) {
//console.log(this.value);
//console.log(this.value.length);
this.style.height = this.scrollHeight + "px";
document.getElementById("textvalue").innerHTML = this.value.length + "/150";
});
}
</script>
</body>
</html>