JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果-創(chuàng)新互聯(lián)

京東淘寶的密碼輸入框功能點(diǎn)

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、克州網(wǎng)絡(luò)推廣、小程序開發(fā)、克州網(wǎng)絡(luò)營(yíng)銷、克州企業(yè)策劃、克州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供克州建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

• 只能輸入數(shù)字
• 只能輸入6位字符
• 每次輸入一個(gè)字符，對(duì)應(yīng)位置的小黑點(diǎn)顯示
• 每次刪除一個(gè)字符，對(duì)應(yīng)位置的小黑點(diǎn)消失
  

實(shí)現(xiàn)思路

1、寫好6位密碼輸入框的靜態(tài)樣式和html結(jié)構(gòu)
2、將密碼輸入框input定位到父容器，覆蓋之前寫好的6位密碼輸入框區(qū)域，并設(shè)置為透明
3、雖然設(shè)置了密碼輸入框?yàn)橥该?，但?dāng)密碼輸入框獲得焦點(diǎn)的時(shí)候，輸入框的光標(biāo)會(huì)顯示出來，并不是透明狀態(tài)。為了解決這個(gè)問題，暫時(shí)想到了兩種方法，第一種，利用css將光標(biāo)也設(shè)置為透明，不過這種方法有一定的兼容問題；第二種，當(dāng)輸入框獲得焦點(diǎn)的時(shí)候，將輸入框定位到屏幕外面，用戶看不到輸入框，自然也就看不到光標(biāo)在那里一閃一閃了。
4、對(duì)于用戶只能輸入數(shù)字的功能，這里用正則表達(dá)式就搞定了，如果用戶輸入了非數(shù)字字符，將input輸入框的值清空
5、對(duì)于用戶輸入超過6位字符的情況，利用字符串的截取方法截取input.value的前6位字符
6、循環(huán)遍歷圓點(diǎn)，將index小于input.value.length的圓點(diǎn)顯示出來
7、用戶輸入超過6個(gè)的數(shù)字的時(shí)候，你再去刪除，你會(huì)發(fā)現(xiàn)要?jiǎng)h除很多字符，那些小圓點(diǎn)才會(huì)相應(yīng)的消失，所以這里，將截取的6位字符賦值給input輸入框的值，讓input.value長(zhǎng)度永遠(yuǎn)小于等于6

HTML結(jié)構(gòu)

父容器 input-ps 用于input輸入框的定位
一位密碼對(duì)應(yīng)一個(gè)input-ps-item和dot

<div class="input-ps">
  <div class="input-ps-item">
    <span class="dot"></span> //小圓點(diǎn)
  </div>
  <div class="input-ps-item">
    <span class="dot"></span>
  </div>
  <div class="input-ps-item">
    <span class="dot"></span>
  </div>
  <div class="input-ps-item">
    <span class="dot"></span>
  </div>
  <div class="input-ps-item">
    <span class="dot"></span>
  </div>
  <div class="input-ps-item last">
    <span class="dot"></span>
  </div>
  <input id="input-mima" class="input-mima" type="text"/>
</div>

當(dāng)前名稱：JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果-創(chuàng)新互聯(lián)
鏈接地址：http://muchs.cn/article18/dejggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站收錄、定制開發(fā)、網(wǎng)頁設(shè)計(jì)公司、App設(shè)計(jì)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)