小程序表單多行輸入框表格的示例分析

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

多行輸入框。

示例代碼：

<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自動(dòng)變高" />
</view>
<view class="section">
  <textarea placeholder="placeholder顏色是紅色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="這是一個(gè)可以自動(dòng)聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="這個(gè)只有在按鈕點(diǎn)擊的時(shí)候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</button>
  </view>
</view><view class="section">  <form bindsubmit="bindFormSubmit">    <textarea placeholder="form 中的 textarea" name="textarea"/>    <button form-type="submit"> 提交 </button>  </form></view>

//textarea.js
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },  bindFormSubmit: function(e) {    console.log(e.detail.value.textarea)  }
})

Bug & Tip

1. bug: 微信版本6.3.30，textarea在列表渲染時(shí)，新增加的textarea在自動(dòng)聚焦時(shí)的位置計(jì)算錯(cuò)誤。

2. tip:textarea 的blur事件會(huì)晚于頁(yè)面上的tap事件，如果需要在button的點(diǎn)擊事件獲取textarea，可以使用form的bindsubmit。

3. tip: 不建議在多行文本上對(duì)用戶的輸入進(jìn)行修改，所以textarea的bindinput處理函數(shù)并不會(huì)將返回值反映到textarea上。

4. tip:textarea組件是由客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的。

5. tip: 請(qǐng)勿在scroll-view中使用textarea組件。

6. tip:css動(dòng)畫(huà)對(duì)textarea組件無(wú)效。

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