位置: 编程技术 - 正文

JavaScript仿支付宝密码输入框(java模拟支付功能)

编辑：rootadmin

推荐整理分享JavaScript仿支付宝密码输入框(java模拟支付功能)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js微信支付开发教程,js 支付,js微信支付开发教程,html仿微信支付,java模拟支付,js支付功能,html仿微信支付,js支付功能,内容如对您有帮助，希望把文章链接给更多的朋友！

现在很多时候大家付款的场景都是在手机上面，而随着H5页面的开发变得越来越方便，很多场景也从客户端搬到了浏览器中，其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧：

那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签。

并且给这个5个input设置display: inline-block 属性，同时用<!- ->来消除元素直接的margin值，那么HTML就是如下的样子：

在代码中我们需要设置最多输入的位数，不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来，我们也需要设置type="tel"。那么接下来就是CSS样式的代码了，这里我就简单的贴出一些代码，具体高仿的像不像其实就是这里了~

那么接下来就是最关键的JavaScript部分了，

首先我们对最外层的div进行监听，当发现用户选择div的时候就将input的焦点设置到active上面去，而这个active则是一个计数器，默认的时候是第一位的，也就是0，而当我们输入了正确的数字后将会增加一个active，这样input的焦点就会向后移动了，这样就完成了输入一个向后移动一位的功能了，而同时我们监听键盘上的退格键，当用户点击了退格键之后就对active减一，这样输入框的焦点也就向前移动了，当然，当input失去焦点的时候我们也同时移除绑定在上面的监听事件，这样就不会造成多次触发的问题了。

其实这样梳理下来会发现整个效果还是很简单的，只需要控制好一个焦点的移动就好了，而我觉得整个组件的重点还是在CSS样式的模仿上面~毕竟JavaScript的逻辑没有什么难的~最后祝大家元旦快乐啦~(*^__^*) ~~

以上代码给大家简单介绍了JavaScript仿支付宝密码输入框的全部叙述，希望大家喜欢。

你有必要知道的个JavaScript面试题 1、使用typeofbar==="object"判断bar是不是一个对象有神马潜在的弊端？如何避免这种弊端？使用typeof的弊端是显而易见的(这种弊端同使用instanceof)：letobj={};l

javascript从作用域链谈闭包神马是闭包关于闭包的概念，是婆说婆有理。闭包是指有权访问另外一个函数作用域中的变量的函数这概念有点绕，拆分一下。从概念上说，闭包有两

js为什么不能正确处理小数运算？ varsum=0;for(vari=0;i;i++){sum+=0.1;}console.log(sum);上面的程序会输出1吗？在你有必要知道的个JavaScript面试题一文中，第8个题浅显的说了下js为什么不能正确