# textarea

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

微信 Windows 版：支持

微信 Mac 版：支持

微信鴻蒙 OS 版：支持

渲染框架支持情況：Skyline （使用最新 Nightly 工具調(diào)試）、WebView

# 功能描述

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

# 通用屬性

屬性類型默認(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,line-height 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)聚焦，拉起鍵盤。 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

cursor-spacing number 0 否指定光標(biāo)與鍵盤的距離。取textarea距離底部的距離和cursor-spacing指定的距離的最小值作為光標(biāo)與鍵盤的距離 1.0.0

cursor number -1 否指定focus時(shí)的光標(biāo)位置 1.5.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 否鍵盤彈起時(shí)，是否自動(dòng)上推頁(yè)面 1.9.90

hold-keyboard boolean false 否 focus時(shí)，點(diǎn)擊頁(yè)面的時(shí)候不收起鍵盤 2.8.2

disable-default-padding boolean false 否是否去掉 iOS 下的默認(rèn)內(nèi)邊距 2.10.0

confirm-type string return 否設(shè)置鍵盤右下角按鈕的文字 2.13.0

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

confirm-hold boolean false 否點(diǎn)擊鍵盤右下角按鈕時(shí)是否保持鍵盤不收起 2.16.0

adjust-keyboard-to boolean cursor 否鍵盤對(duì)齊位置。 2.16.1

合法值	說(shuō)明
cursor	對(duì)齊光標(biāo)位置
bottom	對(duì)齊輸入框底部

bindfocus eventhandle 否輸入框聚焦時(shí)觸發(fā)，event.detail = { value, height }，height 為鍵盤高度，在基礎(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)鍵盤輸入時(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 否鍵盤高度發(fā)生變化的時(shí)候觸發(fā)此事件，event.detail = {height: height, duration: duration} 2.7.0

# Skyline 特有屬性

屬性	類型	必填	說(shuō)明	最低版本
placeholder-style	string	否	需傳入對(duì)象，格式為 `{ fontSize: number, fontWeight: string, color: string }`
bind:selectionchange	eventhandle	否	選區(qū)改變事件, {selectionStart, selectionEnd}	3.2.0
bind:keyboardcompositionstart	eventhandle	否	輸入法開(kāi)始新的輸入時(shí)觸發(fā) （僅當(dāng)輸入法支持時(shí)觸發(fā)）	3.2.0
bind:keyboardcompositionupdate	eventhandle	否	輸入法輸入字符時(shí)觸發(fā)（僅當(dāng)輸入法支持時(shí)觸發(fā)）	3.2.0
bind:keyboardcompositionend	eventhandle	否	輸入法輸入結(jié)束時(shí)觸發(fā)（僅當(dāng)輸入法支持時(shí)觸發(fā)）	3.2.0

# WebView 特有屬性

屬性	類型	默認(rèn)值	必填	說(shuō)明	最低版本
placeholder-class	string	textarea-placeholder	否	指定 placeholder 的樣式類，目前僅支持color,font-size和font-weight	1.0.0
fixed	boolean	false	否	如果 textarea 是在一個(gè) `position:fixed` 的區(qū)域，需要顯示指定屬性 fixed 為 true	1.0.0
show-confirm-bar	boolean	true	否	是否顯示鍵盤上方帶有”完成“按鈕那一欄	1.6.0

# Bug & Tip

tip: textarea 的 blur 事件會(huì)晚于頁(yè)面上的 tap 事件，如果需要在 button 的點(diǎn)擊事件獲取 textarea，可以使用 form 的 bindsubmit。
tip: 不建議在多行文本上對(duì)用戶的輸入進(jìn)行修改，所以 textarea 的 bindinput 處理函數(shù)并不會(huì)將返回值反映到 textarea 上。
tip : 鍵盤高度發(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)
  }
})