您的位置：首页 > 其它

textarea高度随内容自动改变

2018-01-06 12:43 459 查看

需求

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;
}

简陋的源码

<!doctype html>
<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 的标准事件，可以用来检测元素通过用户界面发生的内容变化，在内容修改后立即被触发

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航