微信小程序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-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>//textarea.jsPage({ 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 組件
新聞熱點
疑難解答