基于JS实现类似支付宝支付密码输入框_javascript技巧
作者：用户
本文讲的是基于JS实现类似支付宝支付密码输入框_javascript技巧，
本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入6位
首先给大家展示下效果图，如果感觉不错，请参考实现代码。
margin: 10
width: 329
本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入6位
首先给大家展示下效果图，如果感觉不错，请参考实现代码。
margin: 10
width: 329
height: 640
padding-top: 200
.inputBoxContainer{
width: 240
height: 50
.inputBoxContainer .bogusInput{
width: 100%;
height: 100%;
border: #c3c3c3 1
border-radius: 7
-moz-border-radius: 7
-webkit-border-radius: 7
z-index: 0;
.inputBoxContainer .realInput{
width: 100%;
height: 100%;
z-index: 1;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
.inputBoxContainer .bogusInput input{
padding: 0;
width: 16.3%;
height: 100%;
background: #
text-align:
font-size: 20
border-right: #C3C3C3 1
.inputBoxContainer .bogusInput input:last-child{
.confirmButton{
width: 240
height: 45
border-radius: 7
-moz-border-radius: 7
-webkit-border-radius: 7
background: #f4f4f4;
border: #d5d5d5 1
font-size: 16
margin: 30
margin-bottom: 20
.showValue{
width: 240
height: 22
line-height: 22
font-size: 16
text-align:
2、HTML代码
&div class="wrap"&
&div class="inputBoxContainer" id="inputBoxContainer"&
&input type="text" class="realInput"/&
&div class="bogusInput"&
&input type="password" maxlength="6" disabled/&
&input type="password" maxlength="6" disabled/&
&input type="password" maxlength="6" disabled/&
&input type="password" maxlength="6" disabled/&
&input type="password" maxlength="6" disabled/&
&input type="password" maxlength="6" disabled/&
&button id="confirmButton" class="confirmButton"&查看&/button&
&p class="showValue" id="showValue"&&/p&
3、js代码控制逻辑效果
(function(){
var container = document.getElementById("inputBoxContainer");
boxInput = {
maxLength:"",
realInput:"",
bogusInput:"",
bogusInputArr:"",
callback:"",
init:function(fun){
var that =
this.callback =
that.realInput = container.children[0];
that.bogusInput = container.children[1];
that.bogusInputArr = that.bogusInput.
that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
that.realInput.oninput = function(){
that.setValue();
that.realInput.onpropertychange = function(){
that.setValue();
setValue:function(){
this.realInput.value = this.realInput.value.replace(/\D/g,"");
console.log(this.realInput.value.replace(/\D/g,""))
var real_str = this.realInput.
for(var i = 0 ; i & this.maxL i++){
this.bogusInputArr[i].value = real_str[i]?real_str[i]:"";
if(real_str.length &= this.maxLength){
this.realInput.value = real_str.substring(0,6);
this.callback();
getBoxInputValue:function(){
var realValue = "";
for(var i in this.bogusInputArr){
if(!this.bogusInputArr[i].value){
realValue += this.bogusInputArr[i].
return realV
boxInput.init(function(){
getValue();
document.getElementById("confirmButton").onclick = function(){
getValue();
function getValue(){
document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
以上所述是小编给大家介绍的基于JS实现类似支付宝支付密码输入框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对云栖社区网站的支持！
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript 输入框、javascript弹出输入框、js实现输入框搜索联想、ios 微信输入框 实现、微信底部输入框的实现，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
40+云计算产品，6个月免费体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
云服务器9.9元/月，大学必备
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
javascript 输入框、javascript弹出输入框、js实现输入框搜索联想、ios 微信输入框 实现、微信底部输入框的实现的信息
，所有相关内容均不代表云栖社区的意见！支付宝扫码支付的接口对接(Node.js) - 简书
支付宝扫码支付的接口对接(Node.js)
根据支付宝的文档描述，扫码支付属于的一个功能，在开通该功能前必须要创建一个。应用审核通过后，会得到一个PID，此时进入“管理中心-某应用-功能信息”中申请开通当面付即可。
接口通信过程中要对数据进行。支付宝提供了密钥生成器，需要将生成的应用公钥填写到中。在填写应用公钥后，还可以对签名算法进行验证。支付宝的描述如下：
请将Json串{"a":"123"}使用填写公钥对应的私钥签名，并将签名sign值输入下方文本框，支付宝将校验公钥正确性。如不会签名，可使用签名工具。
这里我使用node.js的crypto模块签名，先把JSON转为字符串'{"a":"123"}'，却总是得到公私钥不匹配的结果。不得已下载了支付宝提供的签名工具，在这款“支付宝报文签名生成器”的软件左下角，发现这样一行字：
默认SHA1签名，编码：GBK，预签名串：a=123
看来是支付宝埋的坑，于是改为对“a=123”签名，终于匹配了，下面是签名的示例代码：
let crypto = require('crypto');
let fs = require('fs');
let str = 'a=123';
console.log(str);
let private_key = fs.readFileSync('rsa_private_key.pem');
let signer = crypto.createSign('RSA-SHA1');
signer.update(str);
let sign = signer.sign(private_key, 'base64');
console.log(sign);
确定私钥和签名算法正确后，就可以尝试获取二维码了。文档说的比较清楚，要将sign之外参数按字母升序排列，签名后再将sign加入到参数中。这里有个关键步骤，就是要对参数进行urlencode。的文档中没有提到这一点，但如果缺少会返回“签名无效”。而在移动支付的中倒是提到了urlencode，可见支付宝的文档还是有点乱。这里分两种情况考虑：
参数中没有中文，这种情况比较简单，只对sign进行encodeuricomponent即可。
参数中有中文，这时需要对含中文的参数进行编码。
综合考虑，其实以上两点可以一起处理，即不考虑有无中文，都对所有参数进行编码。得到sign的签名值后，对整个参数Ojbect使用querystring模块处理即可：
const qs = require('querystring');
let signedParams = qs.stringify(params);
这一步注意两点：
检查支付宝公钥是否正确
一开始我直接用了Github某个demo中的alipay_public_key.pem文件，结果总是验签失败，最后在提问，才知道这个密钥是错误的。在管理中心中可以查看支付宝公钥，我用的pem文件如下：
-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDDI6d306Q8fIfCOaTXyiUeJHkr
IvYISRcc73s3vF1ZT7XN8RNPwJxo8pWaJMmvyTn9N4HQ632qJBVHf8sxHi/fEsra
prwCtzvzQETrNRwVxLO5jVmRGi60j8Ue1efIlzPXV9je9mkjzOmdssymZkh2QhUr
CmZYI/FCEa3/cNMW0QIDAQAB
-----END PUBLIC KEY-----
转义正斜杠
支付宝要求，如果字符串中包含http://的正斜杠，需要先将正斜杠做转义。比如返回数据中的"qr_code":"https:\/\/qr.alipay.com\/bax04939acho3lnsxaoa4047"，验签时要包含这个转义字符。javascript中使用replace即可。验签代码如下：
let signArg = res.alipay_trade_precreate_
let str = JSON.stringify(signArg).replace(/\//g, '\\/');
let pubkey = fs.readFileSync('alipay_public_key.pem');
let sign = res.
let verify = crypto.createVerify('RSA-SHA1').update(str);
let ret = verify.verify(pubkey, sign, 'base64');
console.log(ret);
支付宝简介文档 （适用于ydm-java接口与后台，如有误入，但愿也能给您带来帮助） 此文档写于2017年3月，只能说明此时该文档适用。使用前请查看以下接口支付宝是否提供。 App支付产品 批量付款到支付宝账户 （链接如有发生变化，请在官方文档中寻找此产品，一般情况下，产品...
此文档写于2017年3月，只能说明此时该文档适用。使用前请查看以下接口支付宝是否提供。 App支付产品 批量付款到支付宝账户 （链接如有发生变化，请在官方文档中寻找此产品，一般情况下，产品名不会发生改变） 1. App支付产品 通俗上讲就是在App中使用支付宝付款，流程上就...
1、App支付简介 买家在手机、掌上电脑等无线设备的应用程序内，可通过支付宝进行付款购买特定服务或商品，资金即时到账。 2、App支付申请条件 1.申请前必须拥有经过实名认证的支付宝账户；2.企业或个体工商户可申请；3.需提供真实有效的营业执照，且支付宝账户名称需与营业执照...
博客原文传送门:支付网关接入中的ssl连接和签名调试tips 支付平台网关接入是个费力不讨好的活。做过的人都明白，本身没有很高的技术含量，但是工作的内容是及其繁琐和费时费力的。对一个商家的支付平台的开发者而言，每一个bank processor的接入都会涉及到基本的支付机构...
由于苹果审核机制变化，除了JSPatch等热修复的应用受到影响外，另个影响较大的就是非法集成第三方支付SDK（尤其支付宝）而审核被拒。但是由于你懂的的原因，不想走IAP(In App Pay)，所以当然想到了支付宝 WAP 支付。完成 WAP 支付大概花了三天多时间，但是有...
拍过《辛德勒的名单》，《大白鲨》，《ET》的国际知名导演斯皮尔伯格的新作《圆梦巨人》终于在国内上映了，带着极大的期许杀到电影院里观影，看罢，心头有无数只鸟儿跌跌撞撞飞过，下面，鱼头将分别从槽点和梗点为各位看官进行点评。 槽点一：剧情老套有助于睡眠。冗长、拖沓的117分钟让我...
【题目】 Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 【分析】 水题，没啥好说的，这题见过好多次了... 【代码】 class Solu...
最近几天都没有写东西了，总是觉得自己写的文章很浅薄，害怕写出来被人嘲笑，所以渐渐有了不敢动笔写的念头。直到今天看到了晨读材料《写出我心》，才明白原来我迟迟不肯落笔，很可能是因为对自己期望太高，希望一气呵成写出语言优美、条理清晰的文章，获得别人的认同和欣赏。 或者好不容易开始...
阶梯教室最后排，我迷迷糊糊从梦中醒来，窗外天色昏黄，估计已经下课很久了，老师学生都走光了，空荡荡。我伏起身，一只手揉揉眼睛，一只手抹掉下巴上的口水渍。忽地发现，你还安静地坐在我座位旁边写作业。
版权信息 文章版权更好时代原创出品 执笔作者马克云（已签约） 正文字数1173字 阅读时间4分钟 首发日期日 - 无人的逻辑 无人化的应用如今真是到达了一个鼎盛时期，无人便利店的崛起使我们不得不换一个角度看无人化为我们带来的益处。在人力成本日益增长的今天，...NodeJS 怎么集成支付宝付款
20:14:20 +08:00 · 6181 次点击
最近要集成支付功能，微信已经做好了，想再集成支付宝，发现比较坑，没有集成的实现方法，只有 SDK 。只是没有 node.js 版的，我想自知 Ruby/Python/Golang 这样的语言是怎么集成支付宝的？
网上找了一些 node 集成的版本，但是比较老，不敢用。有没有讲解集成原理性的文件？支付宝上没有找到。
JAVA 版资源 SDK1.5 适用于 Java 语言、 jdk 版本 1.5 及以上的开发环境
SDK1.4 适用于 Java 语言、 jdk 版本 1.4 及以下的开发环境
.NET 版资源 SDK 适用于 Visual studio 2010 及以上版本、 Framework3.5 及以上版本的开发环境
PHP 版资源 SDK 适用于 php5.5 以上的开发环境
C++版资源 SDK 适用于 C++语言，使用方法详见 SDK 中的 Readme.txt
C 版资源 SDK 适用于 C 语言，使用方法详见 SDK 中的
（内含当面付 DEMO 示例）
21 回复 &| &直到
16:08:59 +08:00
& & 20:16:11 +08:00
自己看看 API 文档就能写了，支付宝的不复杂。
& & 20:19:15 +08:00
不是自己写就好了么……
本身就是个排序 签名的验证。
& & 20:44:33 +08:00
api 文档没找到
& & 20:46:58 +08:00
找到了 HTTP 源码，准备根据这个来实现
& & 20:48:26 +08:00
这是线下的，你准备做线上的还是线下的……
& & 20:54:40 +08:00
生成二维码后，展示给用户，由用户扫描二维码完成订单支付。
& & 20:56:23 +08:00
看你签的是哪个产品，签约好后会提供集成文档，都会有针对接口本身的详细说明。
& & 23:11:41 +08:00
群主可以找我，我做过。外包给我。支付宝支付、退款等功能都做过。
& & 23:12:52 +08:00
@ 我做过。我的 QQ ：
& & 00:05:44 +08:00
。就是一个 API call 加一点验证而已啊..
& & 10:19:22 +08:00
支付宝付款和退款我恨不得不看手册都可以写出来了 很简单的 就是构造请求参数 发送 HTTP 请求 接收 POST 异步回调
先在支付宝商户后台签约相应产品 然后就可以获取相关文档 对着文档做就行 与语言无关吧
& & 11:21:45 +08:00
@ 没有遇到坑吗
& & 12:22:35 +08:00 via iPhone
@ 坑就是金额字段不能有多余的 0 比如： 10.010 应该转换成 10.01
& & 02:30:20 +08:00
支付宝和微信支付的单位都是不一样的。欢迎一起讨论支付宝、微信和支付宝服务窗的业务。
& & 09:39:45 +08:00
@ 我没说支付宝和微信的支付单位一样啊?
& & 21:31:15 +08:00
其实支付宝的文档比微信还是友好很多的，估计还是你没找对位置
& & 14:50:02 +08:00
支付给了一堆 SDK ，但是数据是怎么传输反倒不好找。对于使用 java/c#/php 之类的估计比较容易。
但我们用的框架都是自已写的。需要一些详细描述传输过程和加密过程的东西。
& & 11:34:19 +08:00
@ 我记得支付宝有支付的文档，对于具体哪个服务的参数和加密过程，异步通知，同步通知都还挺清楚呢
& & 09:48:09 +08:00
最简单的方法是采用支付路由，譬如 ping++ ，另外还有一个。自己对接支付，找到相关文档，和测试工具，服务端程序验证身份，客户端调出支付窗口，前后端有数据通信完成支付。
另外，我们为客户做的公众号的业务，没有做支付宝的接入，据说被微信屏蔽了。
& & 13:52:39 +08:00
用 pingxx 吧，现在都是这样做集成。
& &97 天前
让我做点微小的贡献
& · & 1341 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 22ms · UTC 01:24 · PVG 09:24 · LAX 18:24 · JFK 21:24? Do have faith in what you're doing.js模拟支付宝提交表单
弄过支付宝的程序员可能都知道，里面有很多地方都用到了自提交表单的方式，支付宝的接口通过请求API的形式取得服务器返回的表单字符串，使用out.print("表单字符串")在页面上自提交表单。这种做法虽然很少有人使用，但是它也有着自身的价值，例如有的时候在js内部要提交一个完整的表单但是又不能使用ajax提交，这种时候这种思想就能发挥作用了
封装表单的js如下
var formStart="";
var content="";
var formEnd="";
var submitJs="&script&document.forms['userForm'].submit();&/script&";
var completeForm=formStart+content+formEnd+submitJs;
document.write(completeForm);
这段代码执行后等效于直接给服务器提交了一个表单，有点类似POST请求，这样的话就不需要通过地址栏传参，安全性得到了提高诺基亚820怎样启动javascript?不然不能进行手机支付宝，没有可以输入银行卡号等界面，一直提示要开启JS
按时间排序
你好，基于你说到的问题，手机支付宝与微软WP系统已经完美支持，你可以在官网下载WP版支付宝客户端，从此支付变得如此简单，呵呵。详细信息参考如下：
您可以邀请下面用户，快速获得回答
擅长领域：&&&&
在手机数码分类下共有90385个回答
擅长领域：&&
在手机数码分类下共有20907个回答
擅长领域：&&&&
在手机数码分类下共有17178个回答
擅长领域：
在手机数码分类下共有10925个回答
yuanzhangtongxue
擅长领域：
在手机数码分类下共有7617个回答
擅长领域：&&&&
在手机数码分类下共有7329个回答
加载更多答主
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
点击可定位违规字符位置
确定要取消此次报名，退出该活动？
请输入私信内容：}