信大家都用過支付寶，支付或者轉賬交易的時候，都會要求大家輸入6位數密碼。

今天項目正好有這個需求，小編花了點時間完成，并將如何實現跟大家講述一番。

非常不錯，具有參考借鑒價值，需要的朋友可以參考下。

ps：該版本主要用在移動設備中，如果PC有需要，自行修改css，否則樣式兼容錯亂，另外就是用的是jQ獲取dom，實際使用可自行修改源碼。

先看實例完整界面圖：

實例界面圖

我們先簡單分析功能點。

一、點擊數字錄入密碼框。

二、點擊刪除鍵，從右邊開始逐一刪減。

非常簡單的功能。

先獲取用戶點擊的數字按鈕，獲取每個按鈕數字， 在密碼框顯示數字（或者 *），由于密碼框只有6位，那么再加個限制條件，最后給刪除按鈕加刪除功能。

方法一，通過定義全局下標，給對應密碼框賦值：

var index=0;

// 點擊數字

$('.num').on('click', function () {

// 大于6位就不再執行

if (index < 6) {

var num=$(this).text();

$('.inputBox').eq(index).val(num); // "*"

input ++;

}

});

// 刪除

$('.del').on('click', function () {

// 刪完就不再執行

if (index !=0) {

$('.inputBox').eq(index - 1).val('');

index --;

}

});

這么簡單？那么還有沒有更多方式實現呢？

方法二，我們還能用for來做：

// 點擊數字

$('.num').on('click', function () {

var n=0;

$('.inputBox').each(function () {

var $self=$(this);

if ($self.val()=='' && n==0) {

n=1;

$self.val(number);

}

});

});

// 刪除

$('.del').on('click', function () {

var n=0;

for (var i=0, len=$('.inputBox').length - 1; len >=i; len --) {

if ($('.inputBox').eq(len).val() !='' && n==0) {

n=1;

$('.inputBox').eq(len).val('');

}

}

});

明顯 for 的效率不高，挺差勁的，但而已不是說不能用，畢竟點擊一次只循環6下，我們的目的也只是換種實現方式，做同樣的功能。

方法三，我們也可以把密碼儲存起來，再對密碼做顯示，畢竟密碼是要最后整串提交ajax的：

// 點擊數字

var $inputPwd=$('input[type="password"]');

$('.num').on('click', function () {

var num=$(this).text();

var pwd=$inputPwd.val();

// 超過6位不允許再錄入

if (pwd.length) {

return;

} else {

pwd +=num; // 追加輸入的數字

// $('.inputBox').eq(pwd.length - 1).text('*'); // 密碼不可見

$('.inputBox').eq(pwd.length - 1).text(num); // 密碼可見

$inputPwd.val(pwd); // 填入隱藏域

}

// 輸入夠6位數后立即執行需要做的事情，比如ajax提交

if (pwd.length===6) {

// 你的ajax代碼

console.log('你輸入的密碼是：'+ pwd);

}

});

// 刪除功能

$('.del').on('click', function () {

var pwd=$inputPwd.val();

// 密碼為空的時候不在執行

if (pwd !=='') {

// 從最右邊開始截取 1 位字符

pwd=pwd.slice(0, -1);

// 賦值給密碼框同步密碼

$inputPwd.val(pwd);

// 密碼明文顯示從右開始清空文本

$('.inputBox').eq(pwd.length).text('');

}

});

這里面有一個點，刪除密碼的時候用的截取方式可以有很多種。

例如:

substring() 方法用于提取字符串中介于兩個指定下標之間的字符。

slice() 方法可從已有的數組中返回選定的元素。

substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。

可以做個例子測試

var a=b=c='123456';

a=a.substring(0, a.length-1);

b=b.slice(0, -1);

c=c.substr(0, c.length);

console.log(a)

console.log(b)

console.log(c)

從代碼上來看，第三種方法更好，比較直觀，不需要下標，也不用循環。

如果想要完整DEMO實例，可以到小編的 github 上下載：

https://github.com/orzhtml/MobilePayPwd/

本文內容均屬個人原創作品，轉載此文章須附上出處及原文鏈接。

加關注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！