html5自定義數字鍵盤
阿新 • • 發佈：2017-05-12
blog this cal pre pan initial class function type
原理：使用div模擬輸入框，避免手機原生鍵盤彈出，鍵盤使用div模擬，點擊事件使用js控制，光標閃爍使用css模擬，具體代碼如下：
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<title>key</title> 8 9 <style> 10 .main{width: 200px; margin:0 auto} 11 .num{width: 200px;height: 30px; line-height:30px; border: 1px solid #666;} 12 .num span{position: relative;display: inline-block; min-width: 1px; height: 30px;} 13 .num.active span:after{content: ‘‘; position: absolute; right: -2px; top: 4px; height: 20px; width: 1px; background: #000; animation: 1s linear infinite blink; -webkit-animation: 1s linear infinite blink;}14 @keyframes blink{ 15 0%{ 16 width: 1px; 17 } 18 49.9999%{ 19 width: 1px; 20 } 21 50%{ 22 width: 0; 23 } 24 100%{ 25 width: 0; 26 } 27 } 28 @-webkit-keyframes blink{ 29 0%{ 30 width: 1px; 31 } 32 49.9999%{ 33 width: 1px;34 } 35 50%{ 36 width: 0; 37 } 38 100%{ 39 width: 0; 40 } 41 } 42 .key{ display: none;height: 120px; width: 250px; position: absolute;left:60px;bottom:50px;} 43 .kc{width: 160px;float: left;} 44 .key span{float: left; width: 30px;height: 30px; margin:10px 10px 0 10px; line-height:30px;text-align: center;border: 1px solid #666;} 45 .key em{width: 80px;float: left;} 46 .key em i{display: block;width: 60px;height: 30px; margin:10px 0 10px 0; line-height:30px;text-align: center;border: 1px solid #666; font-style:normal} 47 .key em .next{height: 70px; line-height:70px; margin:10px 0 0;} 48 </style> 49 </head> 50 <body> 51 <div class="main"> 52 <div class="num"><span></span></div> 53 <div class="key"> 54 <div class="kc"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span> 55 <span>7</span><span>8</span><span>9</span></div> 56 <em><i class="del">刪除</i><i class="next">下一題</i></em> 57 </div> 58 </div> 59 <script src="js/jquery.min.js" type="text/javascript"></script> 60 <script type="text/javascript"> 61 $(".num").click(function(){ 62 $(".key").show(); 63 $(this).addClass("active"); 64 return false; 65 }); 66 67 $(document).click(function () { 68 $(".num").removeClass("active"); 69 $(".key").hide(); 70 }); 71 72 $(".key").click(function () { 73 return false; 74 }); 75 76 $(".key span").click(function(){ 77 var key = $(this).text(); 78 $(".num span").html($(".num span").html()+key); 79 }) 80 $(".del").click(function(){ 81 $(".num span").html($(".num span").html().substr(0,$(".num span").html().length-1)); 82 83 }) 84 85 </script> 86 </body> 87 </html>
html5自定義數字鍵盤