注冊(cè)

微信小程序表單組件多行輸入框textarea,textarea多行輸入框

2017-12-22
導(dǎo)讀:textarea 多行輸入框。 屬性名 類型 默認(rèn)值 說(shuō)明 value String 輸入框的內(nèi)容 placeholder String 輸入框?yàn)榭諘r(shí)占位符 placeholder-style String 指定 placeholder 的樣式 placeholder-class String textarea-placeholder...

textarea


多行輸入框。

 

屬性名 類型 默認(rèn)值 說(shuō)明
value String   輸入框的內(nèi)容
placeholder String   輸入框?yàn)榭諘r(shí)占位符
placeholder-style String   指定 placeholder 的樣式
placeholder-class String textarea-placeholder 指定 placeholder 的樣式類
disabled Boolean false 是否禁用
maxlength Number 140 最大輸入長(zhǎng)度,設(shè)置為 -1 的時(shí)候不限制最大長(zhǎng)度
auto-focus Boolean false 自動(dòng)聚焦,拉起鍵盤。
focus Boolean false 獲取焦點(diǎn)
auto-height Boolean false 是否自動(dòng)增高,設(shè)置auto-height時(shí),style.height不生效
fixed Boolean false 如果 textarea 是在一個(gè)position:fixed的區(qū)域,需要顯示指定屬性 fixed 為 true
cursor-spacing Number 0 指定光標(biāo)與鍵盤的距離,單位 px 。取 textarea 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標(biāo)與鍵盤的距離
bindfocus EventHandle   輸入框聚焦時(shí)觸發(fā),event.detail = {value: value}
bindblur EventHandle   輸入框失去焦點(diǎn)時(shí)觸發(fā),event.detail = {value: value}
bindlinechange EventHandle   輸入框行數(shù)變化時(shí)調(diào)用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput EventHandle   當(dāng)鍵盤輸入時(shí),觸發(fā) input 事件,event.detail = {value: value}, bindinput 處理函數(shù)的返回值并不會(huì)反映到 textarea 上
bindconfirm EventHandle   點(diǎn)擊完成時(shí), 觸發(fā) confirm 事件,event.detail = {value: value}

 

示例代碼:

<!--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:textareablur事件會(huì)晚于頁(yè)面上的tap事件,如果需要在button的點(diǎn)擊事件獲取textarea,可以使用formbindsubmit
  3. tip: 不建議在多行文本上對(duì)用戶的輸入進(jìn)行修改,所以textareabindinput處理函數(shù)并不會(huì)將返回值反映到textarea上。
  4. tip:textarea組件是由客戶端創(chuàng)建的原生組件,它的層級(jí)是最高的。
  5. tip: 請(qǐng)勿在scroll-view中使用textarea組件。
  6. tip:css動(dòng)畫對(duì)textarea組件無(wú)效。

更多微信小程序開發(fā)教程,可以關(guān)注hi小程序。
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)