那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签
现在很多时候大家付款的场景都是在手机上面，而随着H5页面的开发变得越来越方便，很多场景也从客户端搬到了浏览器中，其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧：
那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签。
并且给这个5个input设置display: inline-block 属性，同时用<!- ->来消除元素直接的margin值，那么HTML就是如下的样子：
<div class="input"><input type="tel" placeholder="随" maxlength=""><!--><input type="tel" placeholder="机" maxlength=""><!--><input type="tel" placeholder="" maxlength=""><!--><input type="tel" placeholder="位" maxlength=""><!--><input type="tel" placeholder="数" maxlength=""></div>在代码中我们需要设置最多输入的位数，不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来，我们也需要设置type="tel"。那么接下来就是CSS样式的代码了，这里我就简单的贴出一些代码，具体高仿的像不像其实就是这里了~
input {display: inline-block&:last-child {border-right: px solid #}input {border-top: px solid #border-bottom: px solid #border-left: px solid #width: pxheight: pxoutline:nonefont-family: inheritfont-size: pxfont-weight: inherittext-align: centerline-height: pxcolor: #cccbackground: rgba(,,,)}}那么接下来就是最关键的JavaScript部分了，
/*** 模拟支付宝的密码输入形式*/(function (window, document) {var active = ,inputBtn = document.querySelectorAll('input')for (var i = i <inputBtn.lengthi++) {inputBtn[i].addEventListener('click', function () {inputBtn[active].focus()}, false)inputBtn[i].addEventListener('focus', function () {this.addEventListener('keyup', listenKeyUp, false)}, false)inputBtn[i].addEventListener('blur', function () {this.removeEventListener('keyup', listenKeyUp, false)}, false)}/*** 监听键盘的敲击事件*/function listenKeyUp() {var beginBtn = document.querySelector('#beginBtn')if (!isNaN(this.value) &&this.value.length != ) {if (active <) {active += }inputBtn[active].focus()} else if (this.value.length == ) {if (active >) {active -= }inputBtn[active].focus()}if (active >= ) {var _value = inputBtn[active].valueif (beginBtn.className == 'begin-no' &&!isNaN(_value) &&_value.length != ) {beginBtn.className = 'begin'beginBtn.addEventListener('click', function () {calculate.begin()}, false)}} else {if (beginBtn.className == 'begin') {beginBtn.className = 'begin-no'}}}})(window, document)首先我们对最外层的div进行监听，当发现用户选择div的时候就将input的焦点设置到active上面去，而这个active则是一个计数器，默认的时候是第一位的，也就是0，而当我们输入了正确的数字后将会增加一个active，这样input的焦点就会向后移动了，这样就完成了输入一个向后移动一位的功能了，而同时我们监听键盘上的退格键，当用户点击了退格键之后就对active减一，这样输入框的焦点也就向前移动了，当然，当input失去焦点的时候我们也同时移除绑定在上面的监听事件，这样就不会造成多次触发的问题了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
请输入金额：
<input type="text" id="money"><span id="tip"></span>
<SCRIPT LANGUAGE="JavaScript">
<!--
var m = document.getElementById("money")
m.onkeyup = function() {
var regex = /^\d+\.?\d{0,2}$/
if (!regex.test(this.value))
{
document.getElementById("tip").innerHTML = "输入有误！"
this.value = ""
this.focus()
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
numFormat(num) {
var c = (num.toString().indexOf ('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
return c
}
console.log(this.numFormat(20181029.120))
//格式化钱数，三位加一逗号
function toThousands(number) {
number = number +""
number = number.replace(/\,/g, "")
if(isNaN(number) || number == "")return ""
number = Math.round(number * 100) / 100
if (number <0)
return '-' + outputdollars(Math.floor(Math.abs(number) - 0) + '') + outputcents(Math.abs(number) - 0)
else
return outputdollars(Math.floor(number - 0) + '') + outputcents(number - 0)
}
//格式化金额
function outputdollars(number) {
if (number.length <= 3)
return (number == '' ? '0' : number)
else {
var mod = number.length % 3
var output = (mod == 0 ? '' : (number.substring(0, mod)))
for (i = 0i <Math.floor(number.length / 3)i++) {
if ((mod == 0) &&(i == 0))
output += number.substring(mod + 3 * i, mod + 3 * i + 3)
else
output += ',' + number.substring(mod + 3 * i, mod + 3 * i + 3)
}
return (output)
}
}
function outputcents(amount) {
amount = Math.round(((amount) - Math.floor(amount)) * 100)
return (amount <10 ? '.0' + amount : '.' + amount)
}
