如何在微信小程序內(nèi)開發(fā)驗(yàn)證碼密碼輸入框功能
May 31, 2018 pm 02:29 PM
這次給大家?guī)砣绾卧谖⑿判〕绦騼?nèi)開發(fā)驗(yàn)證碼密碼輸入框功能，在微信小程序內(nèi)開發(fā)驗(yàn)證碼密碼輸入框功能的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。
在做小程序過程中做一個(gè)6位驗(yàn)證碼輸入框，本以為很簡(jiǎn)單，但是在寫的時(shí)候遇到各種各樣的阻力，在網(wǎng)上查閱資料也寥寥無幾，后來經(jīng)過一番思考，終于敲定下來本人最滿意的方案，特意發(fā)出來讓大家參考一下，希望能幫到大家！
一、效果圖如下：
二、代碼部分
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({?
?/**?
??*?頁面的初始數(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)，喚起鍵盤，點(diǎn)擊空白處，失去焦點(diǎn)，設(shè)為失去焦點(diǎn)樣式，因?yàn)檩斎肟驅(qū)捀邽?，所以不會(huì)顯示輸入框和光標(biāo)，實(shí)現(xiàn)隱藏。
3、限制輸入框最大字?jǐn)?shù)并且監(jiān)聽輸入框狀態(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)上傳圖片附后端代碼
Atas ialah kandungan terperinci 如何在微信小程序內(nèi)開發(fā)驗(yàn)證碼密碼輸入框功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana untuk menyelesaikan masalah yang Windows 11 meminta anda memasukkan nama pengguna dan kata laluan pentadbir untuk meneruskan?
Apr 11, 2024 am 09:10 AM
Apabila menggunakan sistem Win11, kadangkala anda akan menemui gesaan yang memerlukan anda memasukkan nama pengguna dan kata laluan pentadbir Artikel ini akan membincangkan cara menangani situasi ini. Kaedah 1: 1. Klik [Logo Windows], kemudian tekan [Shift+Restart] untuk memasuki mod selamat atau masukkan mod selamat dengan cara ini: klik menu Mula dan pilih Tetapan. Pilih "Kemas kini dan Keselamatan"; pilih "Mulakan Semula Sekarang" dalam "Pemulihan" selepas memulakan semula dan memasukkan pilihan, pilih - Selesaikan Masalah - Pilihan Lanjutan - Tetapan Permulaan -&mdash
Bagaimana untuk menetapkan kata laluan untuk log masuk ke Douyin? Adakah menetapkan kata laluan untuk log masuk memerlukan pengecaman muka?
Mar 21, 2024 pm 06:10 PM
Dengan populariti Douyin, semakin ramai pengguna mula menggunakan platform ini untuk menikmati keseronokan video pendek. Untuk melindungi keselamatan akaun pengguna, Douyin menyediakan pelbagai kaedah log masuk, antaranya log masuk kata laluan adalah kaedah biasa dan penting. Jadi, bagaimana untuk menetapkan kata laluan untuk log masuk ke Douyin? 1. Bagaimana untuk menetapkan kata laluan untuk log masuk ke Douyin? 1. Buka APP Douyin, klik butang "Saya" di penjuru kanan sebelah bawah untuk memasuki halaman utama peribadi. 2. Di bawah halaman utama peribadi, cari pilihan "Tetapan" dan klik untuk masuk. 3. Dalam halaman tetapan, cari pilihan "Akaun dan Keselamatan" dan klik untuk masuk. 4. Pada halaman Akaun dan Keselamatan, cari pilihan "Kata Laluan Log Masuk" dan klik untuk masuk. 5. Jika kata laluan log masuk belum ditetapkan, sistem akan menggesa anda untuk menetapkan kata laluan log masuk. Masukkan kata laluan yang anda mahu tetapkan
Kata laluan salah, berhati-hati dengan amaran BitLocker
Mar 26, 2024 am 09:41 AM
Artikel ini akan meneroka cara untuk menyelesaikan masalah kata laluan yang salah, terutamanya keperluan untuk berhati-hati apabila berurusan dengan amaran BitLocker. Amaran ini dicetuskan apabila kata laluan yang salah dimasukkan beberapa kali dalam BitLocker untuk membuka kunci pemacu. Biasanya, amaran ini berlaku kerana sistem mempunyai dasar yang mengehadkan percubaan log masuk yang salah (biasanya tiga percubaan log masuk dibenarkan). Dalam kes ini, pengguna akan menerima mesej amaran yang sesuai. Mesej amaran yang lengkap adalah seperti berikut: Kata laluan yang dimasukkan adalah salah Sila ambil perhatian bahawa memasukkan kata laluan yang salah secara berterusan akan menyebabkan akaun dikunci Ini adalah untuk melindungi keselamatan data anda. Jika anda perlu membuka kunci akaun anda, anda perlu menggunakan kunci pemulihan BitLocker. Kata laluan tidak betul, berhati-hati dengan amaran BitLocker yang anda terima apabila anda log masuk ke komputer anda
Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat
Mar 25, 2024 pm 01:26 PM
1. Selepas membuka WeChat, klik ikon carian, masukkan pasukan WeChat, dan klik perkhidmatan di bawah untuk masuk. 2. Selepas memasukkan, klik pilihan alat layan diri di sudut kiri bawah. 3. Selepas mengklik, dalam pilihan di atas, klik pilihan untuk menyahsekat/merayu untuk pengesahan tambahan.
Bagaimana untuk menetapkan kata laluan WiFi penghala menggunakan telefon bimbit (menggunakan telefon bimbit sebagai alat)
Apr 24, 2024 pm 06:04 PM
Rangkaian tanpa wayar telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai dalam dunia digital hari ini. Walau bagaimanapun, melindungi keselamatan rangkaian wayarles peribadi adalah amat penting. Menetapkan kata laluan yang kukuh adalah kunci untuk memastikan rangkaian WiFi anda tidak boleh digodam oleh orang lain. Untuk memastikan keselamatan rangkaian anda, artikel ini akan memperkenalkan secara terperinci cara menggunakan telefon mudah alih anda untuk menukar kata laluan WiFi penghala. 1. Buka halaman pengurusan penghala - Buka halaman pengurusan penghala dalam penyemak imbas mudah alih dan masukkan alamat IP lalai penghala. 2. Masukkan nama pengguna dan kata laluan pentadbir - Untuk mendapatkan akses, masukkan nama pengguna dan kata laluan pentadbir yang betul dalam halaman log masuk. 3. Navigasi ke halaman tetapan wayarles - cari dan klik untuk memasuki halaman tetapan wayarles, dalam halaman pengurusan penghala. 4. Cari Wi semasa
Apakah yang perlu saya lakukan jika kata laluan Win10 saya tidak memenuhi keperluan dasar kata laluan Apa yang perlu dilakukan jika kata laluan komputer saya tidak memenuhi keperluan dasar?
Jun 25, 2024 pm 04:59 PM
Dalam sistem Windows 10, dasar kata laluan ialah satu set peraturan keselamatan untuk memastikan kata laluan yang ditetapkan oleh pengguna memenuhi keperluan kekuatan dan kerumitan tertentu Jika sistem menggesa bahawa kata laluan anda tidak memenuhi keperluan dasar kata laluan, ini biasanya bermakna anda kata laluan tidak memenuhi keperluan yang ditetapkan oleh piawaian Microsoft untuk kerumitan, panjang atau jenis aksara, jadi bagaimana ini boleh dielakkan? Pengguna boleh terus mencari dasar kata laluan di bawah dasar komputer tempatan untuk melaksanakan operasi. Mari lihat di bawah. Penyelesaian yang tidak mematuhi spesifikasi dasar kata laluan: Tukar panjang kata laluan: Mengikut keperluan dasar kata laluan, kami boleh cuba meningkatkan panjang kata laluan, seperti menukar kata laluan 6 digit asal kepada 8 digit atau lebih lama. Tambah aksara khas: Dasar kata laluan selalunya memerlukan kemasukan aksara khas seperti @, #, $, dsb. saya
Bagaimana untuk mendapatkan kata laluan WiFi telefon mudah alih yang disambungkan dengan mudah (cepat cari kata laluan WiFi yang disimpan dalam telefon bimbit)
May 08, 2024 pm 01:10 PM
Telefon bimbit kita telah menjadi sebahagian daripada kehidupan kita dalam masyarakat moden. Sambungan rangkaian tanpa wayar juga telah menjadi alat yang sangat diperlukan dalam kehidupan seharian kita. Walau bagaimanapun, kadangkala kami menghadapi situasi sedemikian: kami ingin menyambung ke peranti lain tetapi tidak dapat berbuat demikian, kami menyambung ke WiFi tetapi terlupa kata laluan. Bagaimana untuk mendapatkan kata laluan WiFi telefon mudah alih yang disambungkan dengan mudah? Cari kata laluan WiFi yang disimpan pada telefon 1. Cari pilihan "WiFi" dalam tetapan, cari dan kliknya, dan masukkan antara muka tetapan telefon "WiFi" untuk memasuki halaman tetapan WiFi, pilihan. 2. Buka butiran rangkaian WiFi yang disambungkan, cari nama rangkaian WiFi yang disambungkan, klik untuk memasuki halaman maklumat terperinci rangkaian, dalam halaman tetapan WiFi. 3.
Tutorial menukar kata laluan wifi pada telefon bimbit (operasi mudah)
Apr 26, 2024 pm 06:25 PM
Rangkaian tanpa wayar telah menjadi bahagian yang amat diperlukan dalam kehidupan kita dengan perkembangan pesat Internet. Untuk melindungi maklumat peribadi dan keselamatan rangkaian, adalah sangat penting untuk menukar kata laluan wifi anda dengan kerap, walau bagaimanapun. Untuk membantu anda melindungi keselamatan rangkaian rumah anda dengan lebih baik, artikel ini akan memperkenalkan anda kepada tutorial terperinci tentang cara menggunakan telefon mudah alih anda untuk menukar kata laluan WiFi anda. 1. Fahami kepentingan kata laluan wifi adalah barisan pertahanan pertama untuk melindungi maklumat peribadi dan keselamatan rangkaian Dalam era Internet, memahami kepentingannya boleh lebih memahami mengapa anda perlu menukar kata laluan anda dengan kerap. 2. Sahkan bahawa telefon disambungkan ke wifi Pertama, pastikan telefon disambungkan ke rangkaian wifi yang kata laluannya anda ingin tukar sebelum menukar kata laluan wifi. 3. Buka menu tetapan telefon dan masukkan menu tetapan telefon.
