溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序的多行輸入框textarea怎么用

發(fā)布時間：2022-03-07 10:11:39 來源：億速云 閱讀：1317 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“微信小程序的多行輸入框textarea怎么用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

textarea

多行輸入框。

屬性名 類型 默認值 說明
value String   輸入框的內(nèi)容
placeholder String   輸入框為空時占位符
placeholder-style String   指定 placeholder 的樣式
placeholder-class String textarea-placeholder 指定 placeholder 的樣式類
disabled Boolean false 是否禁用
maxlength Number 140 最大輸入長度，設(shè)置為 -1 的時候不限制最大長度
auto-focus Boolean false 自動聚焦，拉起鍵盤。
focus Boolean false 獲取焦點
auto-height Boolean false 是否自動增高，設(shè)置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   輸入框行數(shù)變化時調(diào)用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput EventHandle   當鍵盤輸入時，觸發(fā) input 事件，event.detail = {value: value}， bindinput 處理函數(shù)的返回值并不會反映到 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.jsPage({
  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

  1. bug: 微信版本6.3.30，textarea在列表渲染時，新增加的textarea在自動聚焦時的位置計算錯誤。

  2. tip:textarea 的blur事件會晚于頁面上的tap事件，如果需要在button的點擊事件獲取textarea，可以使用form的bindsubmit。

  3. tip: 不建議在多行文本上對用戶的輸入進行修改，所以textarea的bindinput處理函數(shù)并不會將返回值反映到textarea上。

  4. tip:textarea組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的。

  5. tip: 請勿在scroll-view中使用textarea組件。

  6. tip:css動畫對textarea組件無效。

“微信小程序的多行輸入框textarea怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手