微信小程序輸入多行文本的實(shí)戰(zhàn)記錄
引言
昨天把系分的項(xiàng)目又加了一點(diǎn)邏輯判斷,比如已經(jīng)下單的菜品不能減少,不能重復(fù)下單,應(yīng)該先下單再支付等…
弄完購物車的邏輯之后,發(fā)現(xiàn)一直沒有管備注那一塊,于是輸入了一下試試,結(jié)果發(fā)現(xiàn)不能換行…就非常丑陋
后來查閱相關(guān)資料發(fā)現(xiàn),我用的wxml組件是input,只能單行輸入,如果要支持多行輸入,應(yīng)該用textarea。
下面就來介紹一下textarea:
1、textarea的屬性相關(guān)介紹
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |
|---|---|---|---|---|
| value | String | 輸入框的內(nèi)容 | ||
| placeholder | String | 輸入框?yàn)榭諘r(shí)占位符 | ||
| placeholder-style | String | 指定 placeholder 的樣式 | ||
| placeholder-class | String | textarea-placeholder | 指定 placeholder 的樣式類 | |
| disabled | Boolean | false | 是否禁用 | |
| maxlength | Number | 140 | 最大輸入長度,設(shè)置為 -1 的時(shí)候不限制最大長度 | |
| auto-focus | Boolean | false | 自動(dòng)聚焦,拉起鍵盤。 | |
| focus | Boolean | false | 獲取焦點(diǎn) | |
| auto-height | Boolean | false | 是否自動(dòng)增高,設(shè)置auto-height時(shí),style.height不生效 | |
| fixed | Boolean | false | 如果 textarea 是在一個(gè) position:fixed 的區(qū)域,需要顯示指定屬性 fixed 為 true | |
| cursor-spacing | Number | 0 | 指定光標(biāo)與鍵盤的距離,單位 px 。取 textarea 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標(biāo)與鍵盤的距離 | |
| cursor | Number | 指定focus時(shí)的光標(biāo)位置 | 1.5.0 | |
| show-confirm-bar | Boolean | true | 是否顯示鍵盤上方帶有”完成“按鈕那一欄 | 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 | 鍵盤彈起時(shí),是否自動(dòng)上推頁面 | 1.9.90 |
| bindfocus | EventHandle | 輸入框聚焦時(shí)觸發(fā),event.detail = { value, height },height 為鍵盤高度,在基礎(chǔ)庫 1.9.90 起支持 | ||
| bindblur | EventHandle | 輸入框失去焦點(diǎn)時(shí)觸發(fā),event.detail = {value, cursor} | ||
| bindlinechange | EventHandle | 輸入框行數(shù)變化時(shí)調(diào)用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} | ||
| bindinput | EventHandle | 當(dāng)鍵盤輸入時(shí),觸發(fā) input 事件,event.detail = {value, cursor}, bindinput 處理函數(shù)的返回值并不會(huì)反映到 textarea 上 | ||
| bindconfirm | EventHandle | 點(diǎn)擊完成時(shí), 觸發(fā) confirm 事件,event.detail = {value: value} |
2、使用示例
下面給出我們的 的示例,備注輸入框的值與details綁定,當(dāng)失去焦點(diǎn)(默認(rèn)為輸入完成)時(shí)將textarea的輸入框內(nèi)的值賦值給details,而執(zhí)行完某些業(yè)務(wù)(提交訂單or支付訂單)時(shí)設(shè)置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
});
},
...
//提交訂單或支付訂單時(shí)清空備注
var that = this;
that.setData({
details: '',
})由于備注部分在頁面上只占一部分位置,因此設(shè)置其css樣式為固定高度,而不是設(shè)其屬性auto-height。
3、效果
支持多行輸入,超過給定高度出現(xiàn)滾動(dòng)條


獲取輸入框內(nèi)的文字

4、Bug & Tip bug:
- bug: 微信版本 6.3.30,textarea 在列表渲染時(shí),新增加的 textarea 在自動(dòng)聚焦時(shí)的位置計(jì)算錯(cuò)誤。
- tip: textarea 的 blur 事件會(huì)晚于頁面上的 tap 事件,如果需要在 button 的點(diǎn)擊事件獲取 textarea,可以使用 form 的 bindsubmit。
- tip: 不建議在多行文本上對(duì)用戶的輸入進(jìn)行修改,所以 textarea 的 bindinput 處理函數(shù)并不會(huì)將返回值反映到 textarea 上。
- tip: textarea 組件是由客戶端創(chuàng)建的原生組件,它的層級(jí)是最高的,不能通過 z-index 控制層級(jí)。
- tip: 請(qǐng)勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 組件。
- tip: css 動(dòng)畫對(duì) textarea 組件無效。
更多資料請(qǐng)查看官網(wǎng)文檔。
總結(jié)
到此這篇關(guān)于微信小程序輸入多行文本的文章就介紹到這了,更多相關(guān)微信小程序輸入多行文本內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript仿京東實(shí)現(xiàn)秒殺倒計(jì)時(shí)案例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),感興趣的小伙伴們可以參考一下2022-03-03
根據(jù)后端返回的json數(shù)據(jù)快速生成ts類型的實(shí)現(xiàn)代碼
在前端開發(fā)中,我們通常需要處理來自后端或其他數(shù)據(jù)源的 JSON 數(shù)據(jù),這些數(shù)據(jù)可能非常復(fù)雜,包含不同類型的屬性,甚至嵌套對(duì)象和數(shù)組,為了更好地使用這些數(shù)據(jù),我們希望將其轉(zhuǎn)換為TypeScript類型定義,以獲得類型檢查和代碼智能提示的好處2023-10-10
文本框(input)獲取焦點(diǎn)(onfocus)時(shí)樣式改變的示例代碼
本篇文章主要是對(duì)文本框(input)獲取焦點(diǎn)(onfocus)時(shí)樣式改變的示例代碼進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01
微信小程序使用 official-account 組件實(shí)現(xiàn)一鍵跳轉(zhuǎn)公眾號(hào)
本文詳細(xì)介紹了如何在微信小程序中實(shí)現(xiàn)一鍵跳轉(zhuǎn)到公眾號(hào)的功能,包括準(zhǔn)備工作、使用`<official-account>`組件實(shí)現(xiàn)跳轉(zhuǎn)、關(guān)聯(lián)小程序與公眾號(hào)的方法,以及常見錯(cuò)誤及解決方案,通過本文的指導(dǎo),開發(fā)者可以順利實(shí)現(xiàn)這一功能,提升用戶體驗(yàn)2024-11-11
JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼,以實(shí)例形式實(shí)現(xiàn)了包括Tab,選項(xiàng)卡,橫向等效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09
如何制作浮動(dòng)廣告 JavaScript制作浮動(dòng)廣告代碼
如果有一定的JavaScript基礎(chǔ),制作浮動(dòng)廣告還是比較容易的,利用閑暇時(shí)間簡單制作了一個(gè),感興趣的朋友可以參考下哦2012-12-12
JavaScript中slice和padEnd的使用小結(jié)
本文介紹了JavaScript中slice和padEnd的使用小結(jié),常常被用于數(shù)據(jù)處理、格式化和切割任務(wù)中,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12

