小程序/网页实现textarea高度随内容自动改变
需求
textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。
发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。
原理：
html结构：
-
<div class="body">
-
<div class="container">
-
<pre class="pre"><span /><br /><br /></pre>
-
<textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
-
</div>
-
</div>
样式：
最外层的div不需要样式，重点在里面的pre和textarea
textarea绝对定位，高度为100%，也就是高度随着外面container的高度变化。
pre是块元素，占用空间但是不可见。在textarea输入的时候，实时的把内容写入到pre中，因为pre是container的子元素，且所以外层container的高度会被pre的高度撑开。
-
.container{
-
position: relative;
-
}
-
.content{
-
position:absolute;
-
top:0;
-
left:0;
-
height:100%;
-
background: transparent;
-
outline:0;
-
resize:none;
-
overflow:hidden;
-
}
-
.container pre {
-
display:block;
-
visibility:hidden;
-
}
js实时把textarea内容写入到pre：
-
function changeContent(){
-
var $textarea = document.getElementsByClassName('content');
-
var $pre = document.getElementsByClassName('pre');
-
$pre[0].innerhtml = $textarea[0].value;
-
}
简陋的源码
-
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<style>
-
.container{
-
position: relative;
-
}
-
.content{
-
position:absolute;
-
top:0;
-
left:0;
-
height:100%;
-
background: transparent;
-
outline:0;
-
font-size: inherit;
-
color: inherit;
-
line-height: inherit;
-
text-indent: inherit;
-
letter-spacing: inherit;
-
resize:none;
-
overflow:hidden;
-
}
-
.container pre {
-
display:block;
-
visibility:hidden;
-
}
-
-
</style>
-
</head>
-
<body>
-
<div class="body">
-
<div class="container">
-
<pre class="pre"><span /><br /><br /></pre>
-
<textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
-
</div>
-
</div>
-
<script>
-
function changeContent(){
-
var $textarea = document.getElementsByClassName('content');
-
var $pre = document.getElementsByClassName('pre');
-
$pre[0].innerhtml = $textarea[0].value;
-
}
-
</script>
-
</body>
-
</html>
使用oninput而不是onchange的原因：
onkeyup使用复制粘贴时，高度不能自动改变
onchange事件：在内容改变（两次内容有可能相等）且失去焦点时触发，不能实时同步
oninput事件：html5 的标准事件，可以用来检测元素通过用户界面发生的内容变化，在内容修改后立即被触发
小程序中的实现
wxml:
<view class="text-box">
<text>{{currentInput}}</text>
<textarea class="weui-textarea" placeholder="请输入文本" bindinput="getInput" maxlength="1000"/>
</view>
wxss:
.text-box{
width:100%;
position: relative;
min-height:80rpx;
margin-top:17rpx;
}
.text-box text{
display:block;
visibility:hidden;
word-break:break-all;
word-wrap:break-word;
}
.text-box .weui-textarea{
height:100%;
position: absolute;
left:0;
top:0;
overflow-y:hidden;
word-break:break-all;
word-wrap:break-word;
}
js:
Page({
data: {
currentInput:''
},
getInput:function(e){
this.setData({
currentInput: e.detail.value
})
}
})
资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh
提醒：默认textarea应该是200个字，如果想要增加字数限制，使用maxlength属性
扩展：如果想给textarea输入的文字加删除线，只需把text的visibility:hidden; 属性去掉，给textarea加一个透明的颜色就可以了。透明颜色：color:rgba(52, 52, 52,0.5);
