移动端虚拟手机键盘
在移动端H5中，我们经常会遇到手机自带的输入法弹出框遮住我们的底部输入框，对此，我们可以设计一个简单的数字键盘的功能，现在也有很多的app采用这种方法，比如民生银行的app，他们的数字键盘就是模拟的，只是没有出现光标，每次在用的时候都不知道自己是在输入什么~~（我不是吐槽，只是从用户的角度感觉确实怪怪的）不过我这里的虚拟键盘解决了这个问题，只是少了一个收起键盘的功能，如有需要可以将10号按键收起~~~~麻烦大家自己动动手指啦~~~
因为是移动端的，我这里用了一款移动端的事件处理代码，hammer.js（http://hammerjs.github.io/dist/hammer.min.js）,感觉还是很好用的，只是高版本的浏览器，大家可能要引入新的jquery，至于为啥，嘿嘿，等你遇到了就知道了。运行前，请先检查你的jq引入与hammer的引入
好了，上代码！
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no, email=no">
<title>移动端虚拟键盘输入</title>
<style type="text/css">
li{
list-style:none;
}
.dialog {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, .4);
top: 0;
left: 0;
z-index: 11111111;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
background-color: #FFF;
border-radius: 8px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.wrap .bottom-box {
margin-top:60px;
width: 100%;
height: 118px;
border-top: 1px solid #E5E5E5;
border-top: none;
border-bottom-right-radius: 53px;
border-bottom-left-radius: 0;
}
a {
color: #252525;
text-decoration: none;
outline-style: none;
-webkit-tap-highlight-color: rgba(0,0,0,.1);
-webkit-user-modify: read-only;
}
.bottom-box span {
width: calc((100% - 1px) / 2);
height: 100%;
font-size: 38px;
color: #4d4d4d;
text-align: center;
line-height: 118px;
}
.bottom-box .calcel-btn, .bottom-box .ordering {
border-right: 1px solid #E5E5E5;
}
.bottom-box .selecte-ok {
color: #EE5844;
}
.fl{
float:left;
}
.fr{
float:right;
}
/*号码输入弹框*/
.title {
margin: 0 auto;
width: 851px;
height: 146px;
font-size: 38px;
color: #808080;
text-align: left;
line-height: 146px;
}
.box{
margin: 0 auto;
padding:0 68px;
width: 809px;
border-radius: 5px;
}
.phonenum-box {
padding-left: 30px;
height: 100px;
border: 1px solid #d9d9d9;
border-radius: 10px;
line-height: 100px;
}
.phonenum-input {
float: left;
height: 100px;
color: #b3b3b3;
font-size: 38px;
}
.keybord-box {
position: absolute;
bottom: -652px;
transition: bottom .5s;
width: 100%;
background: #fff;
}
.key-list{
width: 100%;
background-color: #fff;
}
.key-list li {
float: left;
width: calc(100%/3 - 1px);
height: 162px;
border-right: 1px solid #d9d9d9;
border-top: 1px solid #d9d9d9;
line-height: 162px;
text-align: center;
font-size: 90px;
color: #262626;
}
.key-list li:nth-child(3n) {
border-right: none;
}
.key-list li:nth-child(-n+3) {
/*border-top: none; */
}
.key-list li:nth-child(10),
.key-list li:nth-child(12) {
background-color: #e7e7e7;
}
.key-list li:nth-child(12) {
background: #e7e7e7 url(../../img/keyboard-del.png) center no-repeat;
background-size: 68px 48px;
}
.key-list li:active{
background-color: rgba(0,0,0,.1);
}
.key-list li:nth-child(10):active{
background-color: none;
}
.key-list li:nth-child(12):active{
background-color: rgba(0,0,0,.15);
}
.virtual-cursor{
float: left;
margin: 31px 0 31px 1px;
width: 1px;
height: 38px;
background-color:#b3b3b3;
}
.virtual-cursor{
-webkit-animation: animateCursor 1s infinite;
}
#keybordDelBtn{
background:red;
}
@-webkit-keyframes animateCursor {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(.1);
}
100% {
-webkit-transform: scale(1);
}
}
.keboardShow {
transform: translate3d(-50%,-60%,0);
}
.warn-phone {
height: 80px;
line-height: 80px;
background:url(../../img/warn-phone.png) left no-repeat;
background-size: 37px 37px;
font-size: 38px;
color: #ff4646;
}
</style>
</head>
<body>
<div class="dialog" style="display:block">
<div class="wrap">
<div class="select-people box">
<div class="title">请输入您的手机号码，可以更周到服务您哦！</div>
<div class="phonenum-box"><div class="phonenum-input">输入您的手机号码</div>
<i style="display:none;" class="virtual-cursor"></i>
</div>
<div class="warn-phone" style="display:none">请输入正确的手机号码</div>
</div>
<div class="bottom-box" style="margin-top:0.55rem;">
<a href="javascript:void(null)">
<span class="fl calcel-btn">跳过</span>
</a>
<a href="javascript:void(null)">
<span id="phoneNumSureBtn" class="fl selecte-ok" data-code="'+data.code+'">确定</span>
</a>
</div>
</div>
<div class="keybord-box">
<ul class="key-list">
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li> </li> <li>0</li> <li id="keybordDelBtn"></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script>
var $body = $('body');
$body.addTouch();
// 点击键盘选择输入电话号码
$body.on('tap', '.phonenum-box', function(e) {
var $phonenumInp = $('.phonenum-input'),
$phonenumBox = $('.phonenum-box').parents('.wrap'),
texNum = $phonenumInp.text();
if (!!texNum && texNum == '输入您的手机号码') {
$phonenumInp.text('');
$phonenumBox.addClass('keboardShow');
$('.virtual-cursor')[0].style.display = 'block';
$('.keybord-box')[0].style.bottom = '0';
}
});
// 点击键盘选择输入电话号码
$body.on('tap', '.key-list li', function(e) {
var $this = $(this),
num = $this.text(),
$phonenumInp = $('.phonenum-input');
if (!!num) {
var textNum = parseInt($phonenumInp.text());
if (isNaN(textNum)) {
textNum = '';
textNum = textNum + num;
} else {
textNum = $phonenumInp.text() + num;
}
$('.virtual-cursor')[0].style.display = 'block';
// 展示提示语
$('.warn-phone')[0].style.display = 'none';
if (textNum.length > 11) {
return false;
} else {
$phonenumInp.text(textNum);
}
}
});
// 点击确定输入电话号码
$body.on('tap', '#phoneNumSureBtn', function(e) {
var $phonenumInp = $('.phonenum-input'),
$warnPhonenum = $('.warn-phone'),
phoneTxt = $phonenumInp.text();
if (phoneTxt !== '输入您的手机号码') {
if (!!phoneTxt) {
if (/^1(3|5|4|8|7)\d{9}$/.test(phoneTxt)) {
$warnPhonenum[0].style.display = 'none';
$('.virtual-cursor')[0].style.display = 'none';
if (1) {
// 恢复默认提示输入语
$phonenumInp.text('输入您的手机号码');
$('.box').parents('.dialog').remove();
} else {
// 请求失败提示重新输入
$warnPhonenum.text('手机号码保存失败，请重新输入');
$warnPhonenum[0].style.display = 'block';
}
} else {
// 提示手机号码有误
$warnPhonenum.text('请输入正确的手机号码');
$warnPhonenum[0].style.display = 'block';
console.log('手机号码有误');
}
} else {
// 提示还没有输入号码
$warnPhonenum.text('您还没有输入手机号码哦');
$warnPhonenum[0].style.display = 'block';
}
} else {
// 提示还没有输入号码
$warnPhonenum.text('您还没有输入手机号码哦');
$warnPhonenum[0].style.display = 'block';
}
});
// 点击删除电话号码
$body.on('tap', '#keybordDelBtn', function(e) {
var $phonenumInp = $('.phonenum-input'),
num = $phonenumInp.text();
if (!!num && !isNaN(parseInt(num))) {
var newNum = num.substring(0, num.length - 1);
if (!!newNum) {
$phonenumInp.text(newNum);
$('.virtual-cursor')[0].style.display = 'block';
} else {
// 恢复默认提示输入语
$phonenumInp.text('输入您的手机号码');
$('.virtual-cursor')[0].style.display = 'none';
}
console.log('删除成功');
} else {
// 恢复默认提示输入语
$phonenumInp.text('输入您的手机号码');
$('.virtual-cursor')[0].style.display = 'none';
}
$('.warn-phone')[0].style.display = 'none';
});
console.log(1);
$body.on('tap','.calcel-btn',function(){
debugger;
console.log(2);
});
</script>
</body>
