這次給大家?guī)?lái)如何在微信小程序內(nèi)開(kāi)發(fā)驗(yàn)證碼密碼輸入框功能，在微信小程序內(nèi)開(kāi)發(fā)驗(yàn)證碼密碼輸入框功能的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
在做小程序過(guò)程中做一個(gè)6位驗(yàn)證碼輸入框，本以為很簡(jiǎn)單，但是在寫(xiě)的時(shí)候遇到各種各樣的阻力，在網(wǎng)上查閱資料也寥寥無(wú)幾，后來(lái)經(jīng)過(guò)一番思考，終于敲定下來(lái)本人最滿(mǎn)意的方案，特意發(fā)出來(lái)讓大家參考一下，希望能幫到大家！
一、效果圖如下：
二、代碼部分
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({?
?/**?
??*?頁(yè)面的初始數(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);?
?},?
})
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、放置一個(gè)輸入框，隱藏其文字和位置，同時(shí)設(shè)置支付輸入框（表格）樣式
2、當(dāng)點(diǎn)擊輸入框時(shí)設(shè)置輸入框?yàn)榫劢範(fàn)顟B(tài)，喚起鍵盤(pán)，點(diǎn)擊空白處，失去焦點(diǎn)，設(shè)為失去焦點(diǎn)樣式，因?yàn)檩斎肟驅(qū)捀邽?，所以不會(huì)顯示輸入框和光標(biāo)，實(shí)現(xiàn)隱藏。
3、限制輸入框最大字?jǐn)?shù)并且監(jiān)聽(tīng)輸入框狀態(tài)，以輸入框值的長(zhǎng)度作為輸入框（表格）內(nèi)容的渲染條件
4、點(diǎn)擊提交按鈕時(shí)，獲取輸入框內(nèi)容。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
微信小程序內(nèi)實(shí)現(xiàn)上傳圖片附后端代碼
以上是如何在微信小程序內(nèi)開(kāi)發(fā)驗(yàn)證碼密碼輸入框功能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線(xiàn)人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
win11提示若要繼續(xù),請(qǐng)輸入管理員用戶(hù)名和密碼怎么解決?
Apr 11, 2024 am 09:10 AM
當(dāng)使用Win11系統(tǒng)時(shí)，有時(shí)候會(huì)遇到需要輸入管理員用戶(hù)名和密碼的提示，本文將探討在遇到這種情況時(shí)應(yīng)該如何處理。方法一：1、點(diǎn)擊【W(wǎng)indows徽標(biāo)】，然后按【Shift+重啟】進(jìn)入安全模式；或者這樣進(jìn)入安全模式：點(diǎn)擊開(kāi)始菜單，選擇設(shè)置。選擇“更新和安全”；選擇“恢復(fù)”中的“立即重啟”；重啟進(jìn)入選項(xiàng)后選擇——疑難解答——高級(jí)選項(xiàng)——啟動(dòng)設(shè)置—&mdash
抖音設(shè)置密碼登錄怎么設(shè)置？設(shè)置密碼登錄需人臉識(shí)別嗎？
Mar 21, 2024 pm 06:10 PM
隨著抖音的普及，越來(lái)越多的用戶(hù)開(kāi)始使用這個(gè)平臺(tái)，享受短視頻帶來(lái)的樂(lè)趣。為了保護(hù)用戶(hù)賬號(hào)的安全，抖音提供了多種登錄方式，其中密碼登錄是一種常見(jiàn)且重要的方式。那么，如何設(shè)置抖音的密碼登錄呢？一、抖音設(shè)置密碼登錄怎么設(shè)置？1.打開(kāi)抖音APP，點(diǎn)擊右下角的“我”按鈕，進(jìn)入個(gè)人主頁(yè)。2.在個(gè)人主頁(yè)下方，找到“設(shè)置”選項(xiàng)，點(diǎn)擊進(jìn)入。3.在設(shè)置頁(yè)面中，找到“賬號(hào)與安全”選項(xiàng)，點(diǎn)擊進(jìn)入。4.在賬號(hào)與安全頁(yè)面中，找到“登錄密碼”選項(xiàng)，點(diǎn)擊進(jìn)入。5.如果尚未設(shè)置登錄密碼，系統(tǒng)會(huì)提示您設(shè)置登錄密碼。輸入您想要設(shè)置的密
密碼不正確，小心BitLocker警告
Mar 26, 2024 am 09:41 AM
本文將探討如何解決密碼錯(cuò)誤的問(wèn)題，特別是在處理BitLocker警告時(shí)需要小心。當(dāng)在BitLocker中多次輸入錯(cuò)誤密碼以解鎖驅(qū)動(dòng)器時(shí)，就會(huì)觸發(fā)這個(gè)警告。通常，這個(gè)警告出現(xiàn)是因?yàn)橄到y(tǒng)設(shè)定了限制錯(cuò)誤登錄嘗試的策略（通常是允許3次登錄嘗試）。在這種情況下，用戶(hù)會(huì)收到相應(yīng)的警告信息。完整的警告信息如下:輸入的密碼不正確，請(qǐng)注意-連續(xù)輸入錯(cuò)誤密碼會(huì)導(dǎo)致賬戶(hù)被鎖定，這是為了保護(hù)您的數(shù)據(jù)安全。如果需要解鎖賬戶(hù)，您將需要使用BitLocker恢復(fù)密鑰。密碼不正確，小心BitLocker警告當(dāng)您登錄計(jì)算機(jī)時(shí)收到
微信好友輔助驗(yàn)證進(jìn)行解封的詳細(xì)方法
Mar 25, 2024 pm 01:26 PM
1、打開(kāi)微信進(jìn)入后，點(diǎn)擊搜索圖標(biāo)，輸入微信團(tuán)隊(duì)，點(diǎn)擊下方的服務(wù)進(jìn)入。2、進(jìn)入后，點(diǎn)擊左下方的自助工具的選項(xiàng)。3、點(diǎn)擊后，在上方的選項(xiàng)內(nèi)，點(diǎn)擊解封/申訴輔助驗(yàn)證的選項(xiàng)。
如何使用手機(jī)設(shè)置路由器WiFi密碼（以手機(jī)為工具）
Apr 24, 2024 pm 06:04 PM
無(wú)線(xiàn)網(wǎng)絡(luò)已經(jīng)成為人們生活中不可或缺的一部分、在當(dāng)今數(shù)字化的世界中。保護(hù)個(gè)人無(wú)線(xiàn)網(wǎng)絡(luò)的安全性卻顯得尤為重要、然而。設(shè)置一個(gè)強(qiáng)密碼是確保你的WiFi網(wǎng)絡(luò)不被他人侵入的關(guān)鍵。保障你的網(wǎng)絡(luò)安全，本文將詳細(xì)介紹如何使用手機(jī)來(lái)修改路由器WiFi密碼。1.打開(kāi)路由器管理頁(yè)面-在手機(jī)瀏覽器中打開(kāi)路由器管理頁(yè)面、通過(guò)輸入路由器的默認(rèn)IP地址。2.輸入管理員用戶(hù)名和密碼-以獲得訪問(wèn)權(quán)限，在登錄頁(yè)面中輸入正確的管理員用戶(hù)名和密碼。3.導(dǎo)航到無(wú)線(xiàn)設(shè)置頁(yè)面-查找并點(diǎn)擊進(jìn)入無(wú)線(xiàn)設(shè)置頁(yè)面，在路由器管理頁(yè)面中。4.找到當(dāng)前Wi
Win10密碼不滿(mǎn)足密碼策略要求咋辦? 電腦密碼不滿(mǎn)足策略要求解決辦法
Jun 25, 2024 pm 04:59 PM
在Windows10系統(tǒng)中，密碼策略是一套安全規(guī)則，確保用戶(hù)設(shè)置的密碼符合一定的強(qiáng)度和復(fù)雜性要求，而系統(tǒng)提示您的密碼不滿(mǎn)足密碼策略要求則通常意味著您的密碼沒(méi)有達(dá)到微軟設(shè)定的復(fù)雜度、長(zhǎng)度或字符種類(lèi)的標(biāo)準(zhǔn)，那么這種情況要如何避免呢？用戶(hù)們可以直接的找到本地計(jì)算機(jī)策略下的密碼策略來(lái)進(jìn)行操作就可以了，下面就一起來(lái)看看吧。不符合密碼策略規(guī)范的解決方法修改密碼長(zhǎng)度：根據(jù)密碼策略要求，我們可以嘗試增加密碼的長(zhǎng)度，比如將原來(lái)的6位密碼改為8位或更長(zhǎng)。添加特殊字符：密碼策略通常要求包含特殊字符，如@、#、$等。我
輕松獲取已連接手機(jī)WiFi密碼的方法（快速查找手機(jī)中已保存的WiFi密碼）
May 08, 2024 pm 01:10 PM
我們的手機(jī)已經(jīng)成為我們生活中不可或缺的一部分、在現(xiàn)代社會(huì)中。而無(wú)線(xiàn)網(wǎng)絡(luò)連接也成為了我們?nèi)粘Ｉ钪斜夭豢缮俚墓ぞ?。然而，有時(shí)候我們會(huì)面臨這樣的情況：想要連接其他設(shè)備卻束手無(wú)策、我們連接了WiFi，但是忘記了密碼。如何輕松地獲取已連接手機(jī)WiFi密碼呢？查找手機(jī)中已保存的WiFi密碼1.在設(shè)置中找到“WiFi”選項(xiàng)找到并點(diǎn)擊，進(jìn)入手機(jī)的設(shè)置界面“WiFi”進(jìn)入WiFi設(shè)置頁(yè)面，選項(xiàng)。2.打開(kāi)已連接的WiFi網(wǎng)絡(luò)詳情找到已連接的WiFi網(wǎng)絡(luò)名稱(chēng)，點(diǎn)擊進(jìn)入該網(wǎng)絡(luò)的詳細(xì)信息頁(yè)面，在WiFi設(shè)置頁(yè)面中。3.
手機(jī)修改wifi密碼教程（簡(jiǎn)單操作）
Apr 26, 2024 pm 06:25 PM
無(wú)線(xiàn)網(wǎng)絡(luò)已經(jīng)成為我們生活中不可或缺的一部分、隨著互聯(lián)網(wǎng)的快速發(fā)展。為了保護(hù)個(gè)人信息和網(wǎng)絡(luò)安全，定期更改wifi密碼是非常重要的、然而。幫助大家更好地保護(hù)家庭網(wǎng)絡(luò)安全，本文將為大家介紹如何利用手機(jī)修改wifi密碼的詳細(xì)教程。1.了解wifi密碼的重要性wifi密碼是保護(hù)個(gè)人信息和網(wǎng)絡(luò)安全的道防線(xiàn)，在網(wǎng)絡(luò)時(shí)代、了解其重要性可以更好地理解為什么需要定期修改密碼。2.確認(rèn)手機(jī)連接到wifi首先確保手機(jī)已連接到要修改密碼的wifi網(wǎng)絡(luò)上，在修改wifi密碼之前。3.打開(kāi)手機(jī)設(shè)置菜單進(jìn)入手機(jī)的設(shè)置菜單、在手
