textarea高度隨內容自動改變
阿新 • • 發佈：2019-01-09
需求
textarea預設的高度不是對著內容變化，而是隨著內容增多，出現了滾動條。目前的需求是實現一個能夠輸入的textarea，並且高度跟著內容變化。
發現了一個比較好用的外掛flexText，但是這個基於jquery寫的，目前的技術棧是react，所以簡單看了下，然後用原生的js模擬了一個實現。
原理：
html結構：
<div class="body">
<div class="container">
<pre class="pre"><span /><br /><br /></pre 樣式：
最外層的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 簡陋的原始碼
<!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 的標準事件，可以用來檢測元素通過使用者介面發生的內容變化，在內容修改後立即被觸發