微信小程式輸入多行文字的實戰記錄

2022-03-21 16:00:21

引言

昨天把系分的專案又加了一點邏輯判斷，比如已經下單的菜品不能減少，不能重複下單，應該先下單再支付等…

弄完購物車的邏輯之後，發現一直沒有管備註那一塊，於是輸入了一下試試，結果發現不能換行…就非常醜陋

後來查閱相關資料發現，我用的wxml元件是input，只能單行輸入，如果要支援多行輸入，應該用textarea。

下面就來介紹一下textarea：

1、textarea的屬性相關介紹

屬性名	型別	預設值	說明	最低版本
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` 的區域，需要顯示指定屬性 fixed 為 true
cursor-spacing	Number	0	指定遊標與鍵盤的距離，單位 px 。取 textarea 距離底部的距離和 cursor-spacing 指定的距離的最小值作為遊標與鍵盤的距離
cursor	Number		指定focus時的遊標位置	1.5.0
show-confirm-bar	Boolean	true	是否顯示鍵盤上方帶有”完成“按鈕那一欄	1.6.0
selection-start	Number	-1	遊標起始位置，自動聚集時有效，需與selection-end搭配使用	1.9.0
selection-end	Number	-1	遊標結束位置，自動聚集時有效，需與selection-start搭配使用	1.9.0
adjust-position	Boolean	true	鍵盤彈起時，是否自動上推頁面	1.9.90
bindfocus	EventHandle		輸入框聚焦時觸發，event.detail = { value, height }，height 為鍵盤高度，在基礎庫 1.9.90 起支援
bindblur	EventHandle		輸入框失去焦點時觸發，event.detail = {value, cursor}
bindlinechange	EventHandle		輸入框行數變化時呼叫，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	EventHandle		當鍵盤輸入時，觸發 input 事件，event.detail = {value, cursor}， bindinput 處理常式的返回值並不會反映到 textarea 上
bindconfirm	EventHandle		點選完成時，觸發 confirm 事件，event.detail = {value: value}

2、使用範例

下面給出我們的的範例，備註輸入框的值與details繫結，當失去焦點（預設為輸入完成）時將textarea的輸入框內的值賦值給details，而執行完某些業務（提交訂單or支付訂單）時設定details為空字串。

//wxml
<textarea class="detailText" 
    placeholder="輸入您的備註"
    bindblur="bindTextAreaBlur"
    value="{{details}}">
</textarea>


//js
bindTextAreaBlur: function(e) {
    console.log(e.detail.value);
    var that = this;
    that.setData({
      details: e.detail.value
    });
  },

...

//提交訂單或支付訂單時清空備註
var that = this;
that.setData({
              details: '',
            })

由於備註部分在頁面上只佔一部分位置，因此設定其css樣式為固定高度，而不是設其屬性auto-height。

3、效果

支援多行輸入，超過給定高度出現卷軸

獲取輸入框內的文字

4、Bug & Tip bug:

bug: 微信版本 6.3.30，textarea 在列表渲染時，新增加的 textarea 在自動聚焦時的位置計算錯誤。
tip: textarea 的 blur 事件會晚於頁面上的 tap 事件，如果需要在 button 的點選事件獲取 textarea，可以使用 form 的 bindsubmit。
tip: 不建議在多行文字上對使用者的輸入進行修改，所以 textarea 的 bindinput 處理常式並不會將返回值反映到 textarea 上。
tip: textarea 元件是由使用者端建立的原生元件，它的層級是最高的，不能通過 z-index 控制層級。
tip: 請勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 元件。
tip: css 動畫對 textarea 元件無效。

更多資料請檢視官網檔案。

總結

到此這篇關於微信小程式輸入多行文字的文章就介紹到這了,更多相關微信小程式輸入多行文字內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

微信小程式輸入多行文字的實戰記錄

目錄

引言

1、textarea的屬性相關介紹

2、使用範例

3、效果

4、Bug & Tip bug:

總結

熱門文章