京東淘寶的密碼輸入框功能點

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

• 只能輸入數(shù)字
• 只能輸入6位字符
• 每次輸入一個字符，對應位置的小黑點顯示
• 每次刪除一個字符，對應位置的小黑點消失
  

實現(xiàn)思路

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

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

父容器 input-ps 用于input輸入框的定位
一位密碼對應一個input-ps-item和dot

<div class="input-ps">
  <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">
    <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>

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

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

廣告

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