首页 > 代码库 > html5自定义数字键盘

html5自定义数字键盘

2024-09-21 12:11:42   219人阅读

原理：使用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="http://www.mamicode.com/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自定义数字键盘


联系
我们