原理：使用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>
时间： 2024-10-17 16:07:36