建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序表單組件多行輸入框textarea
# textarea
基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。
創(chuàng)新互聯(lián)專注于黃岡網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供黃岡營銷型網(wǎng)站建設(shè)，黃岡網(wǎng)站制作、黃岡網(wǎng)頁設(shè)計、黃岡網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造黃岡網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供黃岡網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
多行輸入框。該組件是原生組件，使用時請注意相關(guān)限制。
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| value | string | 否 | 輸入框的內(nèi)容 | 1.0.0 | |
| placeholder | string | 否 | 輸入框?yàn)榭諘r占位符 | 1.0.0 | |
| placeholder-style | string | 否 | 指定 placeholder 的樣式，目前僅支持color,font-size和font-weight | 1.0.0 | |
| placeholder-class | string | textarea-placeholder | 否 | 指定 placeholder 的樣式類 | 1.0.0 |
| disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
| maxlength | number | 140 | 否 | 最大輸入長度，設(shè)置為 -1 的時候不限制最大長度 | 1.0.0 |
| auto-focus | boolean | false | 否 | 自動聚焦，拉起鍵盤。 | 1.0.0 |
| focus | boolean | false | 否 | 獲取焦點(diǎn) | 1.0.0 |
| auto-height | boolean | false | 否 | 是否自動增高，設(shè)置auto-height時，style.height不生效 | 1.0.0 |
| fixed | boolean | false | 否 | 如果 textarea 是在一個 position:fixed 的區(qū)域，需要顯示指定屬性 fixed 為 true | 1.0.0 |
| cursor-spacing | number | 0 | 否 | 指定光標(biāo)與鍵盤的距離。取textarea距離底部的距離和cursor-spacing指定的距離的最小值作為光標(biāo)與鍵盤的距離 | 1.0.0 |
| cursor | number | -1 | 否 | 指定focus時的光標(biāo)位置 | 1.5.0 |
| show-confirm-bar | boolean | true | 否 | 是否顯示鍵盤上方帶有”完成“按鈕那一欄 | 1.6.0 |
| selection-start | number | -1 | 否 | 光標(biāo)起始位置，自動聚集時有效，需與selection-end搭配使用 | 1.9.0 |
| selection-end | number | -1 | 否 | 光標(biāo)結(jié)束位置，自動聚集時有效，需與selection-start搭配使用 | 1.9.0 |
| adjust-position | boolean | true | 否 | 鍵盤彈起時，是否自動上推頁面 | 1.9.90 |
| hold-keyboard | boolean | false | 否 | focus時，點(diǎn)擊頁面的時候不收起鍵盤 | 2.8.2 |
| disable-default-padding | boolean | false | 否 | 是否去掉 iOS 下的默認(rèn)內(nèi)邊距 | 2.10.0 |
| confirm-type | string | return | 否 | 設(shè)置鍵盤右下角按鈕的文字 | 2.13.0 |
| confirm-hold | boolean | false | 否 | 點(diǎn)擊鍵盤右下角按鈕時是否保持鍵盤不收起 | 2.16.0 |
| bindfocus | eventhandle | 否 | 輸入框聚焦時觸發(fā)，event.detail = { value, height }，height 為鍵盤高度，在基礎(chǔ)庫 1.9.90 起支持 | 1.0.0 | |
| bindblur | eventhandle | 否 | 輸入框失去焦點(diǎn)時觸發(fā)，event.detail = {value, cursor} | 1.0.0 | |
| bindlinechange | eventhandle | 否 | 輸入框行數(shù)變化時調(diào)用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} | 1.0.0 | |
| bindinput | eventhandle | 否 | 當(dāng)鍵盤輸入時，觸發(fā) input 事件，event.detail = {value, cursor, keyCode}，keyCode 為鍵值，目前工具還不支持返回keyCode參數(shù)。bindinput 處理函數(shù)的返回值并不會反映到 textarea 上 | 1.0.0 | |
| bindconfirm | eventhandle | 否 | 點(diǎn)擊完成時， 觸發(fā) confirm 事件，event.detail = {value: value} | 1.0.0 | |
| bindkeyboardheightchange | eventhandle | 否 | 鍵盤高度發(fā)生變化的時候觸發(fā)此事件，event.detail = {height: height, duration: duration} | 2.7.0 |
confirm-type 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| send | 右下角按鈕為“發(fā)送” | |
| search | 右下角按鈕為“搜索” | |
| next | 右下角按鈕為“下一個” | |
| go | 右下角按鈕為“前往” | |
| done | 右下角按鈕為“完成” | |
| return | 右下角按鈕為“換行” |
# Bug & Tip
tip:textarea的blur事件會晚于頁面上的tap事件，如果需要在button的點(diǎn)擊事件獲取textarea，可以使用form的bindsubmit。tip: 不建議在多行文本上對用戶的輸入進(jìn)行修改，所以textarea的bindinput處理函數(shù)并不會將返回值反映到textarea上。tip: 鍵盤高度發(fā)生變化，keyboardheightchange事件可能會多次觸發(fā)，開發(fā)者對于相同的height值應(yīng)該忽略掉bug: 微信版本6.3.30，textarea在列表渲染時，新增加的textarea在自動聚焦時的位置計算錯誤。
# 示例代碼
在開發(fā)者工具中預(yù)覽效果
//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)
}
})
本文名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序表單組件多行輸入框textarea
新聞來源：http://www.fisionsoft.com.cn/article/coejshp.html
