表單組件_小程式表單多行輸入框表格詳解

多行輸入框。

屬性名稱	類型	預設值	說明
value	String		輸入框的內容
placeholder	#String		輸入框為空時佔位符
placeholder-style	#String		指定 placeholder 的樣式
placeholder-class	##String	textarea-placeholder	指定 placeholder 的樣式類別
disabled	#Boolean	#false	是否禁用
maxlength	Number	140	最大輸入長度，設定為 -1 的時候不限​​制最大長度
auto-focus	Boolean	#false	自動對焦，拉起鍵盤。
focus	Boolean	#false	取得焦點
auto-height	#Boolean	#false	是否自動增高，設定auto-height時，style.height不生效
fixed	#Boolean	#false	如果 textarea 是在一個position:fixed的區域，則需要顯示指定屬性 fixed 為 true
cursor-spacing	Number	0	指定遊標與鍵盤的距離，單位 px 。取 textarea 距離底部的距離和 cursor-spacing 指定的距離的最小值作為遊標與鍵盤的距離
bindfocus	EventHandle	#	輸入框聚焦時觸發，event.detail = {value: value}
bindblur	##EventHandle	#	輸入框失去焦點時觸發，event.detail = {value: value}
bindlinechange	##EventHandle	#	輸入框行數變化時調用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	##EventHandle	#	當鍵盤輸入時，觸發 input 事件，event.detail = {value: value}，bindinput 處理函數的回傳值不會反映在 textarea 上
bindconfirm	EventHandle	#	點擊完成時， 觸發 confirm 事件，event.detail = {value: value}

# 範例程式碼：

<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
  <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</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. ##錯誤# : 微信版本6.3.30，textarea在清單渲染時，新增加的textarea在自動聚焦時的位置計算錯誤。

2.  tip:textarea 的blur事件會晚於頁面上的tap1 ，如果需要在button的點擊事件取得textarea，可以使用form的bindsubmit。

3. tip: 不建議在多行文字上對使用者的輸入進行修改，所以textarea的bindinput處理函數並不會將回傳值反映在textarea上。

4. tip:textarea元件是由客戶端建立的原生元件，它的層級是最高的。

5. tip: 請勿在scroll-view中使用textarea元件。

6. tip:css動畫對textarea元件無效。

相關文章：

微信小程式元件form表單解讀與分析介紹

微信小程式之表單元件分享一

相關影片：

微信小程式開發文件

以上是表單組件_小程式表單多行輸入框表格詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！