js支付宝的支付金额输入框怎么做的 如何在网页上实现支付宝支付密码输入框
\u600e\u6837\u53bb\u652f\u4ed8\u5b9d\u8f93\u5165\u76f8\u5e94\u91d1\u989d\u6536\u5230\u6253\u6b3e\u4e14\u67e5\u8be2\u6253\u6b3e\u91d1\u989d\u540e\uff0c\u767b\u5f55\u652f\u4ed8\u5b9d\u8d26\u6237\uff0c\u8fdb\u5165\u8ba4\u8bc1\u9875\u9762\uff0c\u8f93\u5165\u6536\u5230\u7684\u6253\u6b3e\u91d1\u989d\uff0c\u5b8c\u6210\u91d1\u989d\u7684\u786e\u8ba4\uff1b
\u901a\u5e38\u51fa\u73b0\u8fd9\u4e2a\u60c5\u51b5\u4e09\u79cd\u539f\u56e0\uff0c\u53ef\u4ee5\u5c1d\u8bd5\u4ee5\u4e0b\u65b9\u5f0f\u89e3\u51b3\uff1a1\u3001\u6d4f\u89c8\u5668\u88ab\u635f\u574f\uff0c\u9700\u8981\u91cd\u65b0\u4e0b\u8f7d\u4fee\u590d\u6d4f\u89c8\u5668\u6e05\u9664\u7f13\u5b58\uff0c\u7136\u540e\u5237\u65b0\u7f51\u9875\u5373\u53ef\uff1b2\u3001\u7f51\u901f\u592a\u6162\u5bfc\u81f4\u7684\u7f51\u9875\u65e0\u6cd5\u663e\u793a\uff0c\u68c0\u6d4b\u7f51\u901f\u662f\u5426\u6b63\u5e38\uff1b3\u3001\u652f\u4ed8\u5b9d\u672a\u5b89\u88c5\u63d2\u4ef6\u548c\u5b89\u5168\u8bc1\u4e66\uff0c\u9700\u8981\u5237\u65b0\u7f51\u9875\u6839\u636e\u63d0\u793a\u5b89\u88c5\u63d2\u4ef6\u3002
那么今天我就用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: px;height: px;outline:none;font-family: inherit;font-size: px;font-weight: inherit;text-align: center;line-height: px;color: #ccc;background: rgba(,,,);}}那么接下来就是最关键的JavaScript部分了，
/*** 模拟支付宝的密码输入形式*/(function (window, document) {var active = ,inputBtn = document.querySelectorAll('input');for (var i = ; i < inputBtn.length; i++) {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].value;if (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失去焦点的时候我们也同时移除绑定在上面的监听事件，这样就不会造成多次触发的问题了。
绛旓細鍦ˋPP杞欢璁剧疆閲岃缃備互鏀粯瀹涓轰緥锛氭敮浠樺疂鍒疯劯浠樺氨鏄敮浠樺疂閫氳繃姣斿鑴搁儴鐗瑰緛骞剁粨鍚堢敤鎴风殑韬唤淇℃伅鍜屾搷浣滅幆澧冧俊鎭傛敮浠樺疂鍒疯劯鏀粯浠呮敮鎸佷腑鍥藉ぇ闄嗗疄鍚嶈璇佺殑璐︽埛锛屼笖璐︽埛闇瑕佺粦瀹氫腑鍥藉ぇ闄嗙殑鎵嬫満鍙枫傚湪鏀粯瀹滱PP閲岄潰鎵惧埌鈥滄垜鐨勨濓紝鐒跺悗鐐瑰嚮鈥滆缃-鈥滄墜鏈哄彿鈥濇煡鐪嬨傚埛鑴告敮浠樼殑鍘熺悊鏄汉鑴歌瘑鍒妧鏈紝浜鸿劯璇嗗埆...
绛旓細2銆佹暟鎹牎楠屽師鐞 3銆佺郴缁熶氦浜掓祦绋 4銆佹敮浠樺満鏅叿浣撳疄鐜版祦绋(鏈璇︾粏鍥捐В)闆嗘垚App鏀粯鑳藉姏鏃讹紝寤鸿瀹炵幇濡備笅鏀粯娴佺▼锛屽垱寤鸿鍗曞苟鏀粯锛屾牴鎹繑鍥炵殑缁撴灉纭畾鏀粯鐘舵侊紝骞惰繘琛岀浉搴旂殑寮傚父澶勭悊锛屽叾杩囩▼濡備笅鍥炬墍绀恒傚晢瀹禔PP鍦ㄥ垱寤鸿鍗曞苟涓斿敜璧鏀粯瀹APP鏀粯锛屾祦绋嬪涓婂浘鎵绀猴紝鏍规嵁绗2.2锛3姝ヨ繑鍥鐨勬敮浠缁撴灉锛岀‘瀹...
绛旓細閫氬父鎯呭喌涓嬶紝鏀粯瀹璐︽埛涓嶈兘鏀粯鐨勫師鍥犳槸璐︽埛浣欓鏀粯鍔熻兘琚叧闂傚湪浣跨敤鏀粯瀹濊处鎴风殑杩囩▼涓紝绯荤粺鏍稿疄鍒伴闄╂椂锛屽嚭浜庝繚鎶よ处鎴峰畨鍏ㄧ殑鐩殑浼氬叧闂处鎴风殑浣欓鏀粯鍔熻兘銆
绛旓細鏀粯瀹灏忕▼搴忓紑鍙戞寚鍗楁敮浠樺疂灏忕▼搴忎綔涓轰竴娆惧己澶х殑宸ュ叿锛岄氳繃涓庢敮浠樺疂瀹㈡埛绔揣瀵嗛泦鎴愶紝鎻愪緵浜嗕紭璐ㄧ殑鐢ㄦ埛浣撻獙鍜屼赴瀵岀殑鏈嶅姟銆傚紑鍙戣呭彲浠ュ埄鐢ㄥ叾寮鏀剧殑JSAPI鍜孫penAPI锛屽疄鐜板鏍峰寲鐨勪究鎹锋湇鍔℃瀯寤恒備负浜嗗疄鐜板皬绋嬪簭鐨勫紑鍙戯紝棣栧厛闇瑕佸畬鎴愪紒涓氳处鍙风殑娉ㄥ唽鍜屽叆椹伙紝骞堕氳繃鐗瑰畾娴佺▼鍒涘缓鑷繁鐨勫皬绋嬪簭銆傚垱寤烘楠 1. 绗竴姝ワ細...
绛旓細3.1.min.js">$.fn.scrollImgLeft = function(options) {var def={speed:1,scrollDiv:$('#scrollDiv'),scrollBegin:$('#scrollBegin'),scrollEnd:$('#scrollEnd')}var opts = $.extend(def, options);opts.scrollEnd.html(opts.
绛旓細鏇存崲绯荤粺璁剧疆銆倁niapp鏀粯瀹鏇存崲绯荤粺璁剧疆鍗冲彲杈惧埌鍏煎浠庡簳閮ㄥ脊绐椼倁ni-app锛坲ni锛岃youni锛屾槸缁熶竴鐨勬剰鎬濓級鏄竴涓娇鐢╒ue.js寮鍙戞墍鏈夊墠绔簲鐢ㄧ殑妗嗘灦锛屽紑鍙戣呯紪鍐欎竴濂椾唬鐮併
绛旓細鏀粯瀹濅粯娆鏃舵绘槸鍑虹幇缃戦〉閿欒鍘熷洜鏄細1.缃戠粶鐘跺喌涓嶇ǔ瀹氾紱2.鏀粯瀹濆綋鍓嶄氦鏄撲汉鏁拌繃澶氾紝閫犳垚鏀粯瀹濇敮浠鍝嶅簲涓嶅強鏃讹紝鍑虹幇缃戦〉閿欒銆3.娴忚鍣ㄥ嚭閿欍傝В鍐冲姙娉曪細1.涓嶅湪缃戠粶楂樺嘲鏈燂紝杩涜浠樻锛屽湪浣跨敤缃戠粶浜烘暟灏戠殑鏃舵锛岃繘琛屼粯娆俱2.浣跨敤鎵嬫満鏀粯瀹濆鎴风杩涜浠樻锛岃繖鏍峰氨涓嶄細鍑虹幇缃戦〉閿欒銆3.娓呴櫎娴忚鍣ㄧ紦瀛橈紝...
绛旓細1銆佸井淇″叕浼楀彿涓笉鏀寔鏀粯瀹濇敮浠橈紝鏀寔寰俊鏀粯銆傚彧鑳藉湪鏀粯瀹濅腑鎶婇挶鎻愬埌閾惰鍗￠噷锛屽湪鍘诲井淇￠噷鐢ㄩ摱琛屽崱鏉ヨ繘琛屽井淇℃敮浠橈紝鍏蜂綋鍦ㄦ妸鏀粯瀹濅腑鐨勯挶鎻愬埌閾惰鍗＄殑鏂规硶濡備笅锛岄鍏堟墦寮鏀粯瀹濊蒋浠躲2銆佺劧鍚庡湪棣栭〉涓壘鍒版垜鐨勶紝鐐瑰嚮鎵撳紑銆3銆佺劧鍚庡湪鎵撳紑鐨勭晫闈腑鎵惧埌绾㈡浣嶇疆涓婄殑浣欓锛岀偣鍑绘墦寮浣欓銆3銆佺劧鍚庡湪鎵撳紑...
绛旓細鏀粯瀹鏄窐瀹濈綉鐨勪竴绉嶇綉涓婃敮浠樻柟寮忥紝绠鍗曠殑璇存窐瀹濆眳涓乏鎵嬬粰璐у彸鎵嬫敹閽便傜綉涓婁竴鑸兘鏄按璐,鑰岃嚜绉拌璐х殑99%鏄亣璐ф垨缈绘柊鏈.鐩墠鍥藉唴缃戜笂浜ゆ槗娉曞緥婊炲悗娌℃湁淇濊瘉,缃戜笂鎵嬫満浠锋牸浣庡緱绂昏氨,鍞悗鏈嶅姟鏍规湰娌℃湁淇濊瘉.鍗充娇浣跨敤"鏀粯瀹"锛岀湡鍋囪揣銆佺尗鑵诲湪鍝噷锛熶竴鏃跺崐浼氫篃娌℃硶鐭ラ亾.鍗栨椂浠栨眰"鎮",淇椂浣犳眰浠.缁翠慨璐...
绛旓細鏀粯瀹濊浆璐﹀埌閾惰鍗＄殑娴佺▼锛 鐧诲綍鏀粯瀹濆悗锛岃繘鍏ユ垜鐨勬敮浠樺疂锛岀偣鍑昏浆鍑猴紱 鐐瑰嚮杞嚭鍚庯紝閫夋嫨鈥滆浆鍑鸿嚦閾惰鍗♀濓紝鍐嶉夋嫨閾惰鍗★紙濡傛灉宸茬粦瀹氶摱琛屽崱锛屽氨涓嶉渶瑕侊紱濡傛灉娌℃湁缁戝畾锛屽垯闇瑕侀夋嫨閾惰鍗★紝璇ラ摱琛屽崱寮鎴峰悕蹇呴』鏄笌鏀粯瀹濆疄鍚嶈璇佺殑鍚嶅瓧鐩镐竴鑷达級; 杈撳叆鈥滆浆鍑閲戦鈥濓紝妫鏌...
