閱讀(84.6k) 書(shū)簽贊(5) 我要糾錯(cuò)

微信小程序表單組件多行輸入框 textarea

2021-03-31 10:26 更新

textarea

基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持，低版本需做兼容處理。

多行輸入框。該組件是原生組件，使用時(shí)請(qǐng)注意相關(guān)限制。

屬性	類(lèi)型	默認(rèn)值	必填	說(shuō)明	最低版本
value	string		否	輸入框的內(nèi)容	1.0.0
placeholder	string		否	輸入框?yàn)榭諘r(shí)占位符	1.0.0
placeholder-style	string		否	指定 placeholder 的樣式，目前僅支持color,font-size和font-weight	1.0.0
placeholder-class	string	textarea-placeholder	否	指定 placeholder 的樣式類(lèi)	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
maxlength	number	140	否	最大輸入長(zhǎng)度，設(shè)置為 -1 的時(shí)候不限制最大長(zhǎng)度	1.0.0
auto-focus	boolean	false	否	自動(dòng)聚焦，拉起鍵盤(pán)。	1.0.0
focus	boolean	false	否	獲取焦點(diǎn)	1.0.0
auto-height	boolean	false	否	是否自動(dòng)增高，設(shè)置auto-height時(shí)，style.height不生效	1.0.0
fixed	boolean	false	否	如果 textarea 是在一個(gè) `position:fixed` 的區(qū)域，需要顯示指定屬性 fixed 為 true	1.0.0
cursor-spacing	number	0	否	指定光標(biāo)與鍵盤(pán)的距離。取`textarea`距離底部的距離和`cursor-spacing`指定的距離的最小值作為光標(biāo)與鍵盤(pán)的距離	1.0.0
cursor	number	-1	否	指定focus時(shí)的光標(biāo)位置	1.5.0
show-confirm-bar	boolean	true	否	是否顯示鍵盤(pán)上方帶有”完成“按鈕那一欄	1.6.0
selection-start	number	-1	否	光標(biāo)起始位置，自動(dòng)聚集時(shí)有效，需與`selection-end`搭配使用	1.9.0
selection-end	number	-1	否	光標(biāo)結(jié)束位置，自動(dòng)聚集時(shí)有效，需與`selection-start`搭配使用	1.9.0
adjust-position	boolean	true	否	鍵盤(pán)彈起時(shí)，是否自動(dòng)上推頁(yè)面	1.9.90
hold-keyboard	boolean	false	否	focus時(shí)，點(diǎn)擊頁(yè)面的時(shí)候不收起鍵盤(pán)	2.8.2
disable-default-padding	boolean	false	否	是否去掉 iOS 下的默認(rèn)內(nèi)邊距	2.10.0
confirm-type	string	return	否	設(shè)置鍵盤(pán)右下角按鈕的文字	2.13.0
confirm-hold	boolean	false	否	點(diǎn)擊鍵盤(pán)右下角按鈕時(shí)是否保持鍵盤(pán)不收起	2.16.0
bindfocus	eventhandle		否	輸入框聚焦時(shí)觸發(fā)，event.detail = { value, height }，height 為鍵盤(pán)高度，在基礎(chǔ)庫(kù) 1.9.90 起支持	1.0.0
bindblur	eventhandle		否	輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail = {value, cursor}	1.0.0
bindlinechange	eventhandle		否	輸入框行數(shù)變化時(shí)調(diào)用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}	1.0.0
bindinput	eventhandle		否	當(dāng)鍵盤(pán)輸入時(shí)，觸發(fā) input 事件，event.detail = {value, cursor, keyCode}，keyCode 為鍵值，目前工具還不支持返回keyCode參數(shù)。bindinput 處理函數(shù)的返回值并不會(huì)反映到 textarea 上	1.0.0
bindconfirm	eventhandle		否	點(diǎn)擊完成時(shí)，觸發(fā) confirm 事件，event.detail = {value: value}	1.0.0
bindkeyboardheightchange	eventhandle		否	鍵盤(pán)高度發(fā)生變化的時(shí)候觸發(fā)此事件，event.detail = {height: height, duration: duration}	2.7.0

confirm-type 的合法值

值	說(shuō)明	最低版本
send	右下角按鈕為“發(fā)送”
search	右下角按鈕為“搜索”
next	右下角按鈕為“下一個(gè)”
go	右下角按鈕為“前往”
done	右下角按鈕為“完成”
return	右下角按鈕為“換行”

Bug & Tip

tip: textarea 的 blur 事件會(huì)晚于頁(yè)面上的 tap 事件，如果需要在 button 的點(diǎn)擊事件獲取 textarea，可以使用 form 的 bindsubmit。
tip: 不建議在多行文本上對(duì)用戶(hù)的輸入進(jìn)行修改，所以 textarea 的 bindinput 處理函數(shù)并不會(huì)將返回值反映到 textarea 上。
tip : 鍵盤(pán)高度發(fā)生變化，keyboardheightchange事件可能會(huì)多次觸發(fā)，開(kāi)發(fā)者對(duì)于相同的height值應(yīng)該忽略掉
bug: 微信版本 6.3.30，textarea 在列表渲染時(shí)，新增加的 textarea 在自動(dòng)聚焦時(shí)的位置計(jì)算錯(cuò)誤。

示例代碼

在開(kāi)發(fā)者工具中預(yù)覽效果

<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自動(dòng)變高" />
</view>
<view class="section">
  <textarea placeholder="placeholder顏色是紅色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="這是一個(gè)可以自動(dòng)聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="這個(gè)只有在按鈕點(diǎn)擊的時(shí)候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</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)
  }
})

以上內(nèi)容是否對(duì)您有幫助：

← 微信小程序表單組件開(kāi)關(guān) switch

微信小程序表單組件 editor →

寫(xiě)筆記

我要補(bǔ)充

微信小程序表單組件多行輸入框 textarea

# textarea

# Bug & Tip

# 示例代碼

推薦文章

推薦教程

推薦課程

textarea

Bug & Tip

示例代碼