這篇文章給大家分享的是有關(guān)小程序表單多行輸入框表格的示例分析的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗,為客戶提供超值的營銷型網(wǎng)站建設(shè)服務(wù),我們始終認為:好的營銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個人等客戶提供了成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),以良好的商業(yè)信譽,完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。多行輸入框。
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
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.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) } })
Bug & Tip
bug
: 微信版本6.3.30
,textarea
在列表渲染時,新增加的textarea
在自動聚焦時的位置計算錯誤。
tip
:textarea
的blur
事件會晚于頁面上的tap
事件,如果需要在button
的點擊事件獲取textarea
,可以使用form
的bindsubmit
。
tip
: 不建議在多行文本上對用戶的輸入進行修改,所以textarea
的bindinput
處理函數(shù)并不會將返回值反映到textarea
上。
tip
:textarea
組件是由客戶端創(chuàng)建的原生組件,它的層級是高的。
tip
: 請勿在scroll-view
中使用textarea
組件。
tip
:css
動畫對textarea
組件無效。
感謝各位的閱讀!關(guān)于“小程序表單多行輸入框表格的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
當前標題:小程序表單多行輸入框表格的示例分析-創(chuàng)新互聯(lián)
標題URL:http://m.newbst.com/article36/djhhpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計、商城網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)