小程式/網頁實現textarea高度隨內容自動改變
阿新 • • 發佈：2020-07-16
需求
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);