本文介紹多行輸入框（textarea）。
屬性名稱 | 類型 | 預設值 | 描述 | 最低版本 |
|---|---|---|---|---|
name | String | - | 組件名字，用於表單提交擷取資料 | - |
value | String | - | 初始內容 | - |
placeholder | String | - | 預留位置 | - |
placeholder-style | String | - | 指定 placeholder 的樣式 | |
placeholder-class | String | - | 指定 placeholder 的樣式類 | |
disabled | Boolean | false | 是否禁用 | - |
maxlength | Number | 140 | 最大長度，當設定為 -1 時不限制最大長度 | - |
focus | Boolean | false | 擷取焦點（iOS 不支援） | - |
auto-height | Boolean | false | 是否自動增高 | - |
show-count | Boolean | true | 是否渲染字數統計功能 | |
controlled | Boolean | false | 是否為受控組件。為 true 時，value 內容會完全受 setData 控制 | |
onInput | EventHandle | - | 鍵盤輸入時觸發，可以直接 return 一個字串以替換輸入框的內容 | - |
onFocus | EventHandle | - | 輸入框聚焦時觸發 | - |
onBlur | EventHandle | - | 輸入框失去焦點時觸發 | - |
onConfirm | EventHandle | - | 點擊完成時觸發 | - |
圖示
程式碼範例
<view class="section">
<textarea onBlur="bindTextAreaBlur" auto-height placeholder="自動變高" />
</view>
<view class="section">
<textarea placeholder="這個只有在按鈕點擊的時候才聚焦" focus="{{focus}}" />
<view class="btn-area">
<button onTap="bindButtonTap">使得輸入框擷取焦點</button>
</view>
</view>
<view class="section">
<form onSubmit="bindFormSubmit">
<textarea placeholder="form 中的 textarea" name="textarea"/>
<button form-type="submit"> 提交 </button>
</form>
</view>Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
},
bindFormSubmit: function(e) {
console.log(e.detail.value.textarea)
}
})iOS 鍵盤與組件互動異常處理
對於需要啟動鍵盤的組件，如 input、textarea 等，目前預設使用的是原生鍵盤。如果鍵盤和組件的互動存在異常，可在組件中添加 enableNative="{{false}}"屬性（代碼如下所示），即可恢複到使用 WKWebview 的鍵盤。同時，由於使用的是系統鍵盤，也就不能使用 mPaaS 提供的 Native 鍵盤相關功能。鍵盤與組件的互動目前不再專門適配，如有互動異常問題請使用該方式進行處理。
<textarea value="{{inputValue}}" enableNative="{{false}}" maxlength="500" onInput="onInput" />