實(shí)現(xiàn)思路:
1、放置一個(gè)輸入框,隱藏其文字和位置,同時(shí)設(shè)置支付輸入框(表格)樣式
2、當(dāng)點(diǎn)擊輸入框時(shí)設(shè)置輸入框?yàn)榫劢範(fàn)顟B(tài),喚起鍵盤,點(diǎn)擊空白處,失去焦點(diǎn),設(shè)為失去焦點(diǎn)樣式,因?yàn)檩斎肟驅(qū)捀邽?,所以不會顯示輸入框和光標(biāo),實(shí)現(xiàn)隱藏。
3、限制輸入框最大字?jǐn)?shù)并且監(jiān)聽輸入框狀態(tài),以輸入框值的長度作為輸入框(表格)內(nèi)容的渲染條件
4、點(diǎn)擊提交按鈕時(shí),獲取輸入框內(nèi)容。
1、wxml:
<form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="item"> <input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'> </input> </block> </view> <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input> <view> <button class="btn-area" formType="submit">Submit</button> </view> </form> |
2、js:
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { Length:6, //輸入框個(gè)數(shù) isFocus:true, //聚焦 Value:"", //輸入的內(nèi)容 ispassword:true, //是否密文顯示 true為密文, false為明文。 }, Focus(e){ var that = this; console.log(e.detail.value); var inputValue = e.detail.value; that.setData({ Value:inputValue, }) }, Tap(){ var that = this; that.setData({ isFocus:true, }) }, formSubmit(e){ console.log(e.detail.value.password); }, }) |
3、wxss:
content{ display: flex; justify-content: space-around; align-items: center; margin-top: 200rpx; } iptbox{ width: 80rpx; height: 80rpx; border:1rpx solid #ddd; border-radius: 20rpx; display: flex; justify-content: center; align-items: center; text-align: center; } ipt{ width: 0; height: 0; } btn-area{ width: 80%; background-color: orange; color:white; } |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)