標籤：content rem tle tom pre back css function active
原理：使用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自訂數字鍵台
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
