小程序/網頁實現textarea高度隨內容自動改變


需求

textarea默認的高度不是對着內容變化,而是隨着內容增多,出現了滾動條。目前的需求是實現一個能夠輸入的textarea,並且高度跟着內容變化。

發現了一個比較好用的插件flexText,但是這個基於jquery寫的,目前的技術棧是react,所以簡單看了下,然后用原生的js模擬了一個實現。

 

原理:

html結構:
  1.  
    <div class="body">
  2.  
    <div class="container">
  3.  
    <pre class="pre"><span /><br /><br /></pre>
  4.  
    <textarea class="content" placeholder="請輸入內容" oninput="changeContent()"></textarea>
  5.  
    </div>
  6.  
    </div>
樣式:

最外層的div不需要樣式,重點在里面的pre和textarea

textarea絕對定位,高度為100%,也就是高度隨着外面container的高度變化。

pre是塊元素,占用空間但是不可見。在textarea輸入的時候,實時的把內容寫入到pre中,因為pre是container的子元素,且所以外層container的高度會被pre的高度撐開。

  1.  
    .container{
  2.  
    position: relative;
  3.  
    }
  4.  
    .content{
  5.  
    position:absolute;
  6.  
    top:0;
  7.  
    left:0;
  8.  
    height:100%;
  9.  
    background: transparent;
  10.  
    outline:0;
  11.  
    resize:none;
  12.  
    overflow:hidden;
  13.  
    }
  14.  
    .container pre {
  15.  
    display:block;
  16.  
    visibility:hidden;
  17.  
    }
js實時把textarea內容寫入到pre:
  1.  
    function changeContent(){
  2.  
    var $textarea = document.getElementsByClassName( 'content');
  3.  
    var $pre = document.getElementsByClassName( 'pre');
  4.  
    $pre[ 0].innerhtml = $textarea[0].value;
  5.  
    }

 

簡陋的源碼

  1.  
    <!doctype html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
    <style>
  7.  
    .container{
  8.  
    position: relative;
  9.  
    }
  10.  
    .content{
  11.  
    position:absolute;
  12.  
    top:0;
  13.  
    left:0;
  14.  
    height:100%;
  15.  
    background: transparent;
  16.  
    outline:0;
  17.  
    font-size: inherit;
  18.  
    color: inherit;
  19.  
    line-height: inherit;
  20.  
    text-indent: inherit;
  21.  
    letter-spacing: inherit;
  22.  
    resize:none;
  23.  
    overflow:hidden;
  24.  
    }
  25.  
    .container pre {
  26.  
    display:block;
  27.  
    visibility:hidden;
  28.  
    }
  29.  
     
  30.  
    </style>
  31.  
    </head>
  32.  
    <body>
  33.  
    <div class="body">
  34.  
    <div class="container">
  35.  
    <pre class="pre"><span /><br /><br /></pre>
  36.  
    <textarea class="content" placeholder="請輸入內容" oninput="changeContent()"></textarea>
  37.  
    </div>
  38.  
    </div>
  39.  
    <script>
  40.  
    function changeContent(){
  41.  
    var $textarea = document.getElementsByClassName('content');
  42.  
    var $pre = document.getElementsByClassName('pre');
  43.  
    $pre[0].innerhtml = $textarea[0].value;
  44.  
    }
  45.  
    </script>
  46.  
    </body>
  47.  
    </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);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM