首页 > 代码库 > css+javascript 写的HTML5 微信端输入支付密码键盘
css+javascript 写的HTML5 微信端输入支付密码键盘
微信端没有纯数字键盘，用html5写了一个模仿ios输入支付密码键盘效果
keyboard.js
var _keyboard = {};
$(document).ready(function(){
_keyboard.bindKey();
_keyboard.close();
});
_keyboard.num = 0;
/**
* 给键盘绑定事件
*/
_keyboard.bindKey=function(){
$("#keyId").on("tap","li",function(){
var jthat = $(this);
var numVal = jthat.attr("val");
var inputVal = $("#contentId").val();
if(numVal == -1){ //删除数值
_keyboard.delChar();
}else{ //添加数值
_keyboard.addChar(numVal);
}
});
}
/**
* 添加字符
* @param {Object} numVal 按键的num
* @param {Object} inputVal input内容
*/
_keyboard.addChar=function(numVal){
// console.log(numVal);
if(numVal == "."){
return ;
}
if($("#contentId").find("input").eq(5).val() == ""){
$("#contentId").find("input").eq(_keyboard.num).val(numVal);
}
if(_keyboard.num < 5){
_keyboard.num++;
}
}
_keyboard.close = function(){
$("#keyboardClose").on("click",function(){
$("#contentId").hide();
$("#_Wdafy_keyboard").hide();
$("#keyboardbackground").hide();
});
}
/**
* 删除字符
* @param {Object} inputVal 当前input的val
*/
_keyboard.delChar=function(){
$("#contentId").find("input").eq(_keyboard.num).val("");
if(_keyboard.num == 0){return }
_keyboard.num--;
}
keyboard.htm
<div id="contentId" class="_Wdafy_faInput" style="display: block;">
<div id="keyboardClose" class="close">
<img src="http://www.mamicode.com/img/regClose_Hover.png" />
</div>
<div class="zfpassword">请输入支付密码</div>
<input type="password" readonly="readonly" />
<input type="password" readonly="readonly" />
<input type="password" readonly="readonly" />
<input type="password" readonly="readonly" />
<input type="password" readonly="readonly" />
<input type="password" readonly="readonly" />
<!--<img class="guangbiao" src="http://www.mamicode.com/img/guangbiao.gif" id="cursorId"/>-->
<!--<input type="text" id="contentId" readonly="readonly" maxlength="20" value=""/>-->
</div>
<div id="keyboardbackground" class="keyboardbackground"></div>
<div id="_Wdafy_keyboard" class="_Wdafy_keyboard" style="display: block;">
<ul id="keyId">
<li val="1">1</li>
<li val="2">2</li>
<li val="3">3</li>
<li val="4">4</li>
<li val="5">5</li>
<li val="6">6</li>
<li val="7">7</li>
<li val="8">8</li>
<li val="9">9</li>
<li val="."></li>
<li val="0">0</li>
<li val="-1">x</li>
</ul>
</div>
keyboard.css
body,html {
height: 100%;
}
*{
padding: 0;
margin: 0;
}
._Wdafy_faInput input {
width: 6.2rem; height: 1.4rem; font-size: 0.5rem; line-height: 1.4rem;
}
._Wdafy_faInput .guangbiao {
position: absolute;
left: 10px;
top:0.34rem;
}
._Wdafy_faInput .guangbiao img {
width: 0.01rem;
}
._Wdafy_keyboard {
width: 7.5rem;
position: absolute;
bottom: 0;
}
._Wdafy_keyboard li {
width: 2.5rem;
height: 1rem;
border: 1px solid #BFBFBF;
font-size: 0.6rem;
background: #F5F5F5;
float: left;
line-height: 1rem;
text-align: center;
box-sizing: border-box;
}
._Wdafy_TopBackground {
width: 7.5rem;
text-align: center;
line-height: 0.9rem;
background: #F5F5F5;
height: 0.9rem;
}
._Wdafy_faInput {
position: relative; z-index: 100; text-align: center;
background: #FFF; position: absolute; top: 2rem; margin: 0 auto; width: 6rem;
padding: 0.6rem 0 0.7rem 0;
border-radius: 0.3rem;
left: 0;
right: 0;
margin: 0 auto;
}
._Wdafy_faInput input {
width: 0.74rem;
height: 0.74rem;
background: #FFF;
border: 1px solid #ccc;
text-align: center;
margin-left: 0.2rem;
line-height: 0.5rem;
float: left;
display: block;
}
.keyboardbackground {
width: 7.5rem;
height: 100%;
background: #000;
opacity: 0.7;
position: fixed;
}
.zfpassword {
font-size: 0.3rem;
margin-bottom: 0.2rem;
}
._Wdafy_faInput .close {
position: absolute;
top: 0rem;
right: 0rem;
z-index: 99999;
}
._Wdafy_faInput .close img {
width: 0.78rem;
height: 0.88rem;
}
css+javascript 写的HTML5 微信端输入支付密码键盘
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。