溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“小程序表單多行輸入框表格怎么實現(xiàn)”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“小程序表單多行輸入框表格怎么實現(xiàn)”吧！
多行輸入框。
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| 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的區(qū)域，需要顯示指定屬性 fixed 為 true |
| cursor-spacing | Number | 0 | 指定光標與鍵盤的距離，單位 px 。取 textarea 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離 |
| bindfocus | EventHandle | 輸入框聚焦時觸發(fā)，event.detail = {value: value} | |
| bindblur | EventHandle | 輸入框失去焦點時觸發(fā)，event.detail = {value: value} | |
| bindlinechange | EventHandle | 輸入框行數變化時調用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} | |
| bindinput | EventHandle | 當鍵盤輸入時，觸發(fā) input 事件，event.detail = {value: value}，bindinput 處理函數的返回值并不會反映到 textarea 上 | |
| bindconfirm | EventHandle | 點擊完成時， 觸發(fā) 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上。
tip:textarea組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的。
tip: 請勿在scroll-view中使用textarea組件。
tip:css動畫對textarea組件無效。
感謝各位的閱讀，以上就是“小程序表單多行輸入框表格怎么實現(xiàn)”的內容了，經過本文的學習后，相信大家對小程序表單多行輸入框表格怎么實現(xiàn)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
