信大家都用过支付宝，支付或者转账交易的时候，都会要求大家输入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/

本文内容均属个人原创作品，转载此文章须附上出处及原文链接。

加关注，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！