HTML5/CSS3实现虚拟键盘功能

HTML5 herman 4545浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

我们在访问银行、金融、支付宝等第三方网站时,输入密码或者安全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: ["&deg;","^"],
  1: ["!","1"],
  2: ["\"","2"],
  3: ["§","3"],
  4: ["$","4"],
  5: ["%","5"],
  6: ["&","6"],
  7: ["/","7"],
  8: ["(","8"],
  9: [")","9"],
  10: ["=","0"],
  11: ["?","ß"],
  12: ["`","´"],
  13: ["&larr;"],
  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]+"&nbsp; &nbsp; &nbsp;";
          }
          $(".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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5/CSS3实现虚拟键盘功能