這篇文章給大家分享的是有關(guān) 微信小程序組件textarea多行輸入框的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比雙城網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式雙城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋雙城地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

textarea多行輸入框組件說(shuō)明:

textarea 多行輸入框。

textarea多行輸入框示例代碼運(yùn)行效果如下：

下面是WXML代碼：

placeholder：

下面是WXSS代碼：

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 10px;
}
textarea{
  border: 1px red solid;
  margin: auto;
  width:100%;
  height: 3em;
  margin-top:5px;
  padding: 3px;
}
/*占位符樣式*/
.placeholdText{
  font-size: 2em;
}

textarea多行輸入框的事件效果圖：

下面是WXML代碼：:

auto-height：

bindinput="當(dāng)內(nèi)容改變"

bindfocus:當(dāng)獲取焦點(diǎn)

bindblur：當(dāng)失去焦點(diǎn)觸發(fā)


事件觸發(fā)：

{{log}}

下面是JS代碼：:

Page({
  data:{
    log:'事件觸發(fā)'
  },
  //行高改變時(shí)
  bindlinechange:function(e){
    var height=e.detail.height;
    var heightRpx=e.detail.heightRpx;
    var lineCount=e.detail.lineCount;
    this.setData({
      log:"height="+height+"  |  heightRpx="+heightRpx+"  |  lineCount="+lineCount
    })
  },
    //文本失去焦點(diǎn)
  bindblur:function(e){
    var value=e.detail.value;
     this.setData({
      log:"bindblur失去改變.獲取textarea值="+value
    })
  },
   //文本獲取焦點(diǎn)
  bindfocus:function(e){
    var value=e.detail.value;
     this.setData({
      log:"bindfocus獲取焦點(diǎn),獲取textarea值="+value
    })
  }
})

下面是WXSS代碼：:

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 10px;
}
textarea{
  border: 1px red solid;
  margin: auto;
  width:100%;
  height: 3em;
  margin-top:5px;
  padding: 3px;
}

屬性解析：

下面是WXML代碼：

 等同于 


 等同于 


 等同于 


 等同于 


 等同于 

感謝各位的閱讀！關(guān)于“ 微信小程序組件textarea多行輸入框的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！