需求
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);