溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關微信小程序如何實現textarea組件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
多行輸入框。
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| value | String | 輸入框的內容 | |
| placeholder | String | 輸入框為空時占位符 | |
| placeholder-style | String | 指定 placeholder 的樣式 | |
| placeholder-class | String | textarea-placeholder | 指定 placeholder 的樣式類 |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大輸入長度，設置為0的時候不限制最大長度 |
| auto-focus | Boolean | false | 自動聚焦，拉起鍵盤。頁面中只能有一個 <textarea/> 或<input/> 設置 auto-focus 屬性 |
| focus | Boolean | false | 獲取焦點（開發工具暫不支持） |
| auto-height | Boolean | false | 是否自動增高，設置auto-height時，style.height不生效 |
| bindfocus | EventHandle | 輸入框聚焦時觸發，event.detail = {value: value} | |
| bindblur | EventHandle | 輸入框失去焦點時觸發，event.detail = {value: value} | |
| bindlinechange | EventHandle | 輸入框行數變化時調用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |
示例代碼：
<!--textarea.wxml-->
<view class="section">
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自動變高" />
</view>
<view class="section">
<textarea placeholder="placeholder顏色是紅色的" placeholder- />
</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>//textarea.js
Page({
data: {
height: 20,
focus: false
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
}
})Bug & Tipbug: 微信版本 6.3.30，textarea 在列表渲染時，新增加的 textarea 在自動聚焦時的位置計算錯誤tip: 請勿在 scroll-view 中使用 textarea 組件
關于“微信小程序如何實現textarea組件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
