這次帶給大家如何在微信小程式內(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)證碼輸入框，本來(lái)以為很簡(jiǎn)單，但是在寫(xiě)的時(shí)候遇到各種各樣的阻力，在網(wǎng)上查閱資料也寥寥無(wú)幾，後來(lái)經(jīng)過(guò)一番思考，終於敲定下來(lái)本人最滿意的方案，特意發(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è)定支付輸入框（表格）樣式
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)文章！ JS、php關(guān)鍵字搜尋函數(shù)使用詳解#微信小程式內(nèi)實(shí)作上傳圖片附後端程式碼#########以上是如何在微信小程式內(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
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
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)輸入管理員使用者名稱(chēng)和密碼怎麼解決?
Apr 11, 2024 am 09:10 AM
當(dāng)使用Win11系統(tǒng)時(shí)，有時(shí)會(huì)遇到需要輸入管理員使用者名稱(chēng)和密碼的提示，本文將探討在遇到這種情況時(shí)應(yīng)該如何處理。方法一：1、點(diǎn)選【W(wǎng)indows標(biāo)誌】，然後按【Shift+重啟】進(jìn)入安全模式；或這樣進(jìn)入安全模式：點(diǎn)選開(kāi)始選單，選擇設(shè)定。選擇「更新與安全」；選擇「恢復(fù)」中的「立即重新啟動(dòng)」；重新啟動(dòng)進(jìn)入選項(xiàng)後選擇－疑難排解－進(jìn)階選項(xiàng)－啟動(dòng)設(shè)定—&mdash
密碼不正確，小心BitLocker警告
Mar 26, 2024 am 09:41 AM
本文將探討如何解決密碼錯(cuò)誤的問(wèn)題，特別是在處理BitLocker警告時(shí)需要小心。當(dāng)在BitLocker中多次輸入錯(cuò)誤密碼以解鎖磁碟機(jī)時(shí)，就會(huì)觸發(fā)這個(gè)警告。通常，這個(gè)警告出現(xiàn)是因?yàn)橄到y(tǒng)設(shè)定了限制錯(cuò)誤登入嘗試的策略（通常是允許3次登入嘗試）。在這種情況下，使用者會(huì)收到相應(yīng)的警告訊息。完整的警告訊息如下:輸入的密碼不正確，請(qǐng)注意-連續(xù)輸入錯(cuò)誤密碼會(huì)導(dǎo)致帳戶被鎖定，這是為了保護(hù)您的資料安全。如果需要解鎖帳戶，您將需要使用BitLocker恢復(fù)金鑰。密碼不正確，小心BitLocker警告當(dāng)您登入電腦時(shí)收到
微信好友輔助驗(yà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)。
抖音設(shè)定密碼登入怎麼設(shè)定？設(shè)定密碼登入需人臉辨識(shí)嗎？
Mar 21, 2024 pm 06:10 PM
隨著抖音的普及，越來(lái)越多的用戶開(kāi)始使用這個(gè)平臺(tái)，享受短影片帶來(lái)的樂(lè)趣。為了保護(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è)定的密
如何使用手機(jī)設(shè)定路由器WiFi密碼（以手機(jī)為工具）
Apr 24, 2024 pm 06:04 PM
無(wú)線網(wǎng)路已成為人們生活中不可或缺的一部分、在當(dāng)今數(shù)位化的世界中。保護(hù)個(gè)人無(wú)線網(wǎng)路的安全性卻顯得格外重要、然而。設(shè)定強(qiáng)密碼是確保你的WiFi網(wǎng)路不會(huì)被他人入侵的關(guān)鍵。保障你的網(wǎng)路安全，本文將詳細(xì)介紹如何使用手機(jī)修改路由器WiFi密碼。 1.開(kāi)啟路由器管理頁(yè)面-在手機(jī)瀏覽器中開(kāi)啟路由器管理頁(yè)面、透過(guò)輸入路由器的預(yù)設(shè)IP位址。 2.輸入管理員使用者名稱(chēng)和密碼-以獲得存取權(quán)限，在登入頁(yè)面中輸入正確的管理員使用者名稱(chēng)和密碼。 3.導(dǎo)覽至無(wú)線設(shè)定頁(yè)面-尋找並點(diǎn)選進(jìn)入無(wú)線設(shè)定頁(yè)面，在路由器管理頁(yè)面中。 4.找到當(dāng)前Wi
Win10密碼不符合密碼原則要求咋辦? 電腦密碼不符合政策要求解決方法
Jun 25, 2024 pm 04:59 PM
在Windows10系統(tǒng)中，密碼原則是一套安全性規(guī)則，確保使用者設(shè)定的密碼符合一定的強(qiáng)度和複雜性要求，而係統(tǒng)提示您的密碼不符合密碼原則要求則通常意味著您的密碼沒(méi)有達(dá)到微軟設(shè)定的複雜度、長(zhǎng)度或字元種類(lèi)的標(biāo)準(zhǔn)，那麼這種情況要如何避免呢？使用者可以直接的找到本地電腦策略下的密碼策略來(lái)進(jìn)行操作就可以了，下面就一起來(lái)看看吧。不符合密碼原則規(guī)範(fàn)的解決方法修改密碼長(zhǎng)度：根據(jù)密碼原則要求，我們可以嘗試增加密碼的長(zhǎng)度，例如將原來(lái)的6位密碼改為8位或更長(zhǎng)。新增特殊字符：密碼策略通常要求包含特殊字符，如@、#、$等。我
輕鬆取得已連接手機(jī)WiFi密碼的方法（快速尋找手機(jī)中已儲(chǔ)存的WiFi密碼）
May 08, 2024 pm 01:10 PM
我們的手機(jī)已經(jīng)成為我們生活中不可或缺的一部分、在現(xiàn)代社會(huì)中。而無(wú)線網(wǎng)路連線也成為了我們?nèi)粘Ｉ钪胁豢苫蛉钡墓ぞ?。然而，有時(shí)候我們會(huì)面臨這樣的狀況：想要連接其他裝置卻束手無(wú)策、我們連線了WiFi，但忘了密碼。如何輕鬆取得已連接手機(jī)WiFi密碼？尋找手機(jī)中已儲(chǔ)存的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)路詳情找到已連線的WiFi網(wǎng)路名稱(chēng)，點(diǎn)選進(jìn)入該網(wǎng)路的詳細(xì)資料頁(yè)面，在WiFi設(shè)定頁(yè)面中。 3.
手機(jī)修改wifi密碼教學(xué)（簡(jiǎn)單操作）
Apr 26, 2024 pm 06:25 PM
無(wú)線網(wǎng)路已成為我們生活中不可或缺的一部分、隨著網(wǎng)路的快速發(fā)展。為了保護(hù)個(gè)人資訊和網(wǎng)路安全，定期更改wifi密碼是非常重要的、然而。幫助大家更能保護(hù)家庭網(wǎng)路安全，本文將為大家介紹如何利用手機(jī)修改wifi密碼的詳細(xì)教學(xué)。 1.了解wifi密碼的重要性wifi密碼是保護(hù)個(gè)人資訊和網(wǎng)路安全的道防線，在網(wǎng)路時(shí)代、了解其重要性可以更好地理解為什麼需要定期修改密碼。 2.確認(rèn)手機(jī)連接到wifi首先確保手機(jī)已連接到要修改密碼的wifi網(wǎng)路上，在修改wifi密碼之前。 3.開(kāi)啟手機(jī)設(shè)定選單進(jìn)入手機(jī)的設(shè)定選單、在手
