摘要:本篇教程介绍了jQuery教程 如何实现软键盘替代虚拟键盘,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程 如何实现软键盘替代虚拟键盘,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
<
在移动端支付密码或输入密码时需要弹出虚拟键盘,有些设备在键盘弹出时会把文本框挡住,为了兼容各种设备,所以需要自制软键盘来替代虚拟键盘。
以下是我自制的一个小demo,只能顺序输入和倒序清除,或全部清空;
*{ padding: 0;margin: 0; }
body{ font-family: 'Microsoft Yahei';background-color: #f5f5f5; }
input{ outline: none;background: none;border:0; }
.txt{ width: 14rem;height: 3.5rem;border: 1px solid #dcdcdc;font-size: 0;margin: 8rem auto 0;background-color: #fff; }
.txt input{ width: 3.5rem;height: 3.5rem;border-right: 1px solid #eee;box-sizing: border-box;text-align: center;font-size: 1.5rem; }
.input4{ border-right: 0 !important; }
.key-tab{ width: 100%;background-color: #fff;position: fixed;bottom: 0; }
.key-tab tr{ display: flex;height: 3rem;line-height: 3rem;font-size: 0; }
.key-tab tr td{ flex:1;text-align: center;font-size: 1.5rem;border-right: 1px solid #f5f5f5;box-sizing: border-box;border-bottom: 1px solid #f5f5f5; }
.key-tab tr td:nth-of-type(3){ border-right: 0; }
.key-tab tr td:active{ background-color: #eee; }
html代码:
<div class="txt">
<input type="text" class="input1" readonly name="">
<input type="text" class="input2" readonly name="">
<input type="text" class="input3" readonly name="">
<input type="text" class="input4" readonly name="">
</div>
<div class="keyboard">
<table class="key-tab">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td class="empty">清空</td>
<td>0</td>
<td class="clear">清除</td>
</tr>
</table>
</div>
js代码:
$(document).ready(function(){
var flag = [false,false,false,false]; //判断哪个文本框被激活,false表示未focus,true表示focus
$.each($('td'),function(index,el){ //遍历循环键盘按键是否被点击
$(this).click(function(){
if( $(this).html() == $('.clear').html() ){ //判断是否按了清除按键
$.each(flag,function(index,el){ //循环数组
if(el == true){
$('.txt input').eq(index).val('');
flag = [false,false,false,false];
if(index>0){
flag[index - 1] = true;
}
}
});
return false;
}
if($(this).html() == $('.empty').html()){ //判断是否按了清空按键,文本框都清空并聚焦第一个文本框
$('input').val('');
$('.input1').focus();
return false;
}
if($('.input1').val() == ''){
flag = [true,false,false,false];
$('.input1').val($(this).html());
}else{
if($('.input2').val() == ''){
flag = [false,true,false,false];
$('.input2').val($(this).html());
}else{
if($('.input3').val() == ''){
flag = [false,false,true,false];
$('.input3').val($(this).html());
}else{
if($('.input4').val() == ''){
$('.input4').val($(this).html());
flag = [false,false,false,true];
// 执行完成函数
var str = $('.input1').val() + $('.input2').val() + $('.input3').val() + $('.input4').val();
console.log(str);
}
}
}
}
});
});
$.each($('.txt input'),function(index,el){ //无论点击哪个文本框,都是激活第一个文本框
$(this).click(function(){
$('.input1').focus();
});
});
});
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号