公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
我们在访问银行、金融、支付宝等第三方网站时，输入密码或者安全u盾安全码等，都有虚拟键盘功能。这些虚拟键盘只需通过鼠标点点即可实现键盘功能，预防某些木马对键盘事件进行监听，导致密码泄露问题。而使用虚拟键盘则很好的可以解决这类安全问题，因为我们只用鼠标左键进行点击，木马就监听不到我们具体输入的密码，从而达到更高的安全效果。
小面小编就为大家实现一块web版的虚拟键盘功能，运行demo截图如下：
HTML实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5/CSS3实现虚拟键盘功能</title>
<style>
body{
margin: 0;
padding: 0;
background: #222;
}
body.light{
background: #eee;
}
.switch{
position: absolute;
top: 35px;
left: calc(50% + 335px);
width: 40px;
height: 15px;
border-radius: 360px;
border: 1px solid #ccc;
cursor: pointer;
}
.switch.on{
background: rgba(152, 194, 37, 1);
border: 1px solid rgba(132, 174, 17, 1);
}
.switch .switcher{
width: 15px;
height: 15px;
border-radius: 360px;
margin-top: -1px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
cursor: pointer;
}
.switch.on .switcher{
margin-left: 24px;
}
.wrapper{
position: absolute;
top: 50px;
left: calc(50% - 400px);
width: 800px;
height: 200px;
}
.wrapper ul{
list-style: none;
margin: 0;
padding: 0;
}
.wrapper ul li{
float: left;
width: 40px;
height: 40px;
border: 1px solid #333;
border-radius: 3px;
margin-left: 10px;
margin-top: 10px;
position: relative;
}
body.light .wrapper ul li{
border: 1px solid #ccc;
}
body.light .wrapper ul li .text{
color: #bbb;
}
body.light .wrapper ul li:nth-child(28) .text{
background: #eee;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
body.light .wrapper ul li:nth-child(29) .text:before{
background: #bbb;
}
.wrapper ul li:nth-child(14){
width: 90px;
}
.wrapper ul li:nth-child(15){
width: 70px;
}
.wrapper ul li:nth-child(28){
width: 60px;
border-bottom-right-radius: 0px;
}
.wrapper ul li:nth-child(28) .text{
position: absolute;
top: 27px;
right: -1px;
z-index: 5;
background: #222;
border-left: 1px solid #333;
border-right: 1px solid #333;
width: 40px;
height: 40px;
}
.wrapper ul li:nth-child(29){
width: 90px;
}
.wrapper ul li:nth-child(43){
width: 65px;
}
.wrapper ul li:nth-child(55){
width: 115px;
}
.wrapper ul li:nth-child(56){
opacity: 0.5;
}
.wrapper ul li:nth-child(43) .text{
margin-top: 22px !important;
margin-left: -10px;
}
.wrapper ul li:nth-child(55) .text{
margin-top: 22px !important;
margin-left: 85px;
}
.wrapper ul li:nth-child(59){
width: 55px;
}
.wrapper ul li:nth-child(60){
width: 260px;
}
.wrapper ul li:nth-child(61){
width: 55px;
}
.wrapper ul li:nth-child(63){
height: 19px;
margin-top: 30px;
}
.wrapper ul li:nth-child(64){
height: 19px;
}
.wrapper ul li:nth-child(65){
height: 19px;
margin-top: 30px;
margin-left: -42px;
border-top: 0px solid #fff;
}
.wrapper ul li:nth-child(66){
height: 19px;
margin-top: 30px;
}
.wrapper ul li .text{
color: #444;
font-family: Helvetica;
font-weight: 500;
font-size: 12px;
line-height: 17px;
width: 40px;
height: 40px;
margin-top: 5px;
text-align: center;
}
.wrapper ul li:nth-child(14) .text{
text-align: right;
margin-left: 40px;
font-weight: 100;
margin-top: 20px !important;
font-size: 23px;
}
.wrapper ul li:nth-child(15) .text{
text-align: left;
margin-left: 4px;
font-weight: 0;
margin-top: 20px !important;
font-size: 23px;
}
.wrapper ul li:nth-child(29) .text.active:before{
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 5px;
height: 5px;
background: #98c225 !important;
box-shadow: 0 0 3px #98c225;
border-radius: 360px;
}
.wrapper ul li:nth-child(29) .text:before{
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 5px;
height: 5px;
background: #333;
border-radius: 360px;
}
.wrapper ul li:nth-child(29) .text{
margin-left: -10px;
padding-top: 5px;
}
.wrapper ul li.activeKey .finger{
position: absolute;
width: 40px;
height: 40px;
top: -5px;
left: -5px;
margin-top: 5px;
margin-left: 5px;
border-radius: 360px;
background: rgba(28, 171, 233, 0.5);
opacity: 0;
}
input{
border: 0px solid #fff;
background: transparent;
font-size: 20px;
font-family: Helvetica;
font-weight: 100;
width: 780px;
height: 40px;
position: absolute;
top: 330px;
color: #ccc;
left: calc(50% - 390px);
border-bottom: 1px solid #333;
}
body ::-webkit-input-placeholder{
color: #444;
}
body.light ::-webkit-input-placeholder{
color: #bbb;
}
body.light input{
border-bottom: 1px solid #ccc;
color: #222;
}
body.light input:focus{
outline: none;
border-bottom: 1px solid rgba(28, 171, 233, 0.5);
}
body input:focus{
outline: none;
border-bottom: 1px solid rgba(28, 171, 233, 0.5);
}
</style>
<script src="http://cdn.bootcss.com/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class='switch'>
<div class='switcher'></div>
</div>
<div class='wrapper'></div>
<input placeholder='业余草:www.xttblog.com'>
<script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js'></script>
<script src="js/xttblog.js"></script>
</body>
</html>
xttblog.js代码如下：
var keyboardMap = {
"type": "german",
192: 0,
49: 1,
50: 2,
51: 3,
52: 4,
53: 5,
54: 6,
55: 7,
56: 8,
57: 9,
48: 10,
189: 11,
187: 12,
8: 13,
9: 14,
81: 15,
87: 16,
69: 17,
82: 18,
84: 19,
90: 20,
85: 21,
73: 22,
79: 23,
80: 24,
219: 25,
187: 26,
13: 27,
20: 28,
65: 29,
83: 30,
68: 31,
70: 32,
71: 33,
72: 34,
74: 35,
75: 36,
76: 37,
186: 38,
222: 39,
220: 40,
16: 42,
188: 43,
89: 44,
88: 45,
67: 46,
86: 47,
66: 48,
78: 49,
77: 50,
188: 51,
190: 52,
189: 53,
16: 54,
17: 56,
18: 57,
91: 58,
32: 59,
93: 60,
18: 61,
37: 62,
38: 63,
39: 65,
40: 64,
60: 43,
44: 51,
223: 11,
45: 53,
63: 11,
43: 26
},keyboardKeys = {
"type": "german",
0: ["°","^"],
1: ["!","1"],
2: ["\"","2"],
3: ["§","3"],
4: ["$","4"],
5: ["%","5"],
6: ["&","6"],
7: ["/","7"],
8: ["(","8"],
9: [")","9"],
10: ["=","0"],
11: ["?","ß"],
12: ["`","´"],
13: ["←"],
14: ["⇥"],
15: ["Q"],
16: ["W"],
17: ["E"],
18: ["R"],
19: ["T"],
20: ["Z"],
21: ["U"],
22: ["I"],
23: ["O"],
24: ["P"],
25: ["Ü"],
26: ["*","+"],
27: ["↩"],
28: ["⇪"],
29: ["A"],
30: ["S"],
31: ["D"],
32: ["F"],
33: ["G"],
34: ["H"],
35: ["J"],
36: ["K"],
37: ["L","@"],
38: ["Ö"],
39: ["Ä"],
40: ["'","#"],
42: ["⇧"],
43: [">","<"],
44: ["Y"],
45: ["X"],
46: ["C"],
47: ["V"],
48: ["B"],
49: ["N"],
50: ["M"],
51: [";",","],
52: [":","."],
53: ["_","-"],
54: ["⇧"],
55: ["fn"],
56: ["ctrl"],
57: ["alt","⌥"],
58: ["cmd","⌘"],
60: ["⌘","cmd"],
61: ["alt","⌥"],
62: ["◀"],
63: ["▲"],
64: ["▼"],
65: ["►"]
};
$(document).ready(function(){
$("body").addClass("light");
$("input").focus();
var ul ="<ul>";
for(var i=0;i<66;i++){
ul+="<li><div class='text'></div><div class='finger'></div></li>";
}
ul+="</ul>";
$('div.wrapper').append(ul);
$(".wrapper ul li").each(function(i){
if(keyboardKeys[i]){
if(keyboardKeys[i].length > 1){
var string = "";
if(i==58 || i==60){
for(var j=0;j<keyboardKeys[i].length;j++){
string += keyboardKeys[i][j]+" ";
}
$(".text", this).html(string).css("width","55px").css("margin-left","2px").css("margin-top","23px");
}
else{
for(var j=0;j<keyboardKeys[i].length;j++){
string += keyboardKeys[i][j]+"<br>";
}
$(".text", this).html(string);
}
}
else{
$(".text", this).html(keyboardKeys[i][0]).css("margin-top","13px");
}
if(i==55 || i==56){
$(".text", this).html(keyboardKeys[i][0]).css("margin-top","23px").css("margin-left","-8px");
}
if(i==57||i==61){
$(".text", this).html($(".text", this).html()).css("margin-top","-2px").css("margin-left","-8px").css("line-height","22px");
}
if(i==61){
$(".text", this).css("margin-left","9px");
}
if(i > 61){
$(".text", this).css("margin-top","3px");
}
}
});
$(".switch").click(function(){
$(this).toggleClass("on");
$("body").toggleClass("light");
});
document.addEventListener("keypress",function(e){
if(e.keyCode == 60 || e.keyCode == 44 || e.keyCode == 45 || e.keyCode == 223 || e.keyCode == 63 || e.keyCode == 43){
keyDownAni(keyboardMap[e.keyCode],e);
}
if(!$("input").is(":focus")){
e.preventDefault();
}
});
document.addEventListener("keydown",function(e){
if(e.keyCode == 8 || e.keyCode == 9){
if(!$("input").is(":focus")){
e.preventDefault();
}
}
setTimeout(function(){
if(e.shiftKey && e.keyCode == 16){
var loc = e.location;
if(loc == 1){
//left
keyDownAni(42,e);
}
else if(loc == 2){
//right
keyDownAni(54,e);
}
}
else if(e.altKey && e.keyCode == 18){
if(e.location == 1){
//left
keyDownAni(57,e);
}
else if(e.location == 2){
//left
keyDownAni(61,e);
}
}
else if(e.keyCode == 187 || e.keyCode == 188 || e.keyCode == 189 || e.keycode == 191){
}
else{
keyDownAni(keyboardMap[e.keyCode],e);
}
},10);
});
});
function keyDownAni(eq,e){
var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
var uid = randLetter + Date.now();
var sk = isCapslock(e);
if(sk){
$(".wrapper ul li").eq(eq).children(".text").toggleClass("active");
}
else{
$(".wrapper ul li").eq(eq).children(".text").toggleClass("active");
}
$(".wrapper ul li").eq(eq).addClass("activeKey");
$(".wrapper ul li").eq(eq).attr("id",uid);
$("#"+uid+" .finger").animate({
opacity: 1,
width: "30px",
height: "30px",
top: "0px",
left: "0px"
},300, function(){
$("#"+uid+" .finger").animate({
opacity: 0,
width: "40px",
height: "40px",
top: "-5px",
left: "-5px"
},300,function(){
$("#"+uid+" .finger").eq(eq).removeClass("activeKey");
});
});
}
function isCapslock(e){
e = (e) ? e : window.event;
var charCode = false;
if (e.which) {
charCode = e.which;
} else if (e.keyCode) {
charCode = e.keyCode;
}
var shifton = false;
if (e.shiftKey) {
shifton = e.shiftKey;
} else if (e.modifiers) {
shifton = !!(e.modifiers & 4);
}
if (charCode >= 97 && charCode <= 122 && shifton) {
return true;
}
if (charCode >= 65 && charCode <= 90 && !shifton) {
return true;
}
return false;
}
版权声明：本文为博主原创文章，未经博主允许不得转载。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » HTML5/CSS3实现虚拟键盘功能