這次帶給大家如何在微信小程式內開發驗證碼密碼輸入框功能,在微信小程式內開發驗證碼密碼輸入框功能的注意事項有哪些,下面就是實戰案例,一起來看一下。
在做小程式過程中做一個6位驗證碼輸入框,本來以為很簡單,但是在寫的時候遇到各種各樣的阻力,在網上查閱資料也寥寥無幾,後來經過一番思考,終於敲定下來本人最滿意的方案,特意發出來讓大家參考一下,希望能幫到大家!
一、效果圖如下:
二、程式碼部分 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>js:
Page({ /** * 页面的初始数据 */ data: { Length:6, //输入框个数 isFocus:true, //聚焦 Value:"", //输入的内容 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); }, })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; }#三、想法:
1、放置一個輸入框,隱藏其文字和位置,同時設定支付輸入框(表格)樣式
3、限制輸入框最大字數並且監聽輸入框狀態,以輸入框值的長度作為輸入框(表格)內容的渲染條件
4、點擊提交按鈕時,取得輸入框內容。 相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! JS、php關鍵字搜尋函數使用詳解#微信小程式內實作上傳圖片附後端程式碼#########以上是如何在微信小程式內開發驗證碼密碼輸入框功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!