微信小程式textarea元件
阿新 • • 發佈:2018-11-28
textarea
多行輸入框。該元件是原生元件,使用時請注意相關限制。
屬性名 | 型別 | 預設值 | 說明 | 最低版本 |
---|---|---|---|---|
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 |
|
cursor-spacing | Number / String | 0 | 指定游標與鍵盤的距離,單位px(2.4.0起支援rpx)。取 textarea距離底部的距離和 cursor-spacing 指定的距離的最小值作為游標與鍵盤的距離 | |
cursor | Number | 指定focus時的游標位置 | 1.5.0 | |
show-confirm-bar | Boolean | true | 是否顯示鍵盤上方帶有”完成“按鈕那一欄 | 1.6.0 |
selection-start | Number | -1 | 游標起始位置,自動聚集時有效,需與selection-end搭配使用 | 1.9.0 |
selection-end | Number | -1 | 游標結束位置,自動聚集時有效,需與selection-start搭配使用 | 1.9.0 |
adjust-position | Boolean | true | 鍵盤彈起時,是否自動上推頁面 | 1.9.90 |
bindfocus | EventHandle | 輸入框聚焦時觸發,event.detail = { value, height },height 為鍵盤高度,在基礎庫 1.9.90 起支援 | ||
bindblur | EventHandle | 輸入框失去焦點時觸發,event.detail = {value, cursor} | ||
bindlinechange | EventHandle | 輸入框行數變化時呼叫,event.detail = {height: 0, heightRpx: 0, lineCount: 0} | ||
bindinput | EventHandle | 當鍵盤輸入時,觸發 input 事件,event.detail = {value, cursor},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
- 請注意原生元件使用限制。
bug
: 微信版本6.3.30
,textarea
在列表渲染時,新增加的textarea
在自動聚焦時的位置計算錯誤。tip
:textarea
的blur
事件會晚於頁面上的tap
事件,如果需要在button
的點選事件獲取textarea
,可以使用form
的bindsubmit
。tip
: 不建議在多行文字上對使用者的輸入進行修改,所以textarea
的bindinput
處理函式並不會將返回值反映到textarea
上。
原文連結:https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html?search-key=textarea