Principle: Use div to simulate input box, avoid the phone native keyboard pop-up, keyboard use div simulation, click event Use JS control, cursor blink using CSS simulation, the specific code is as follows:
1<!doctype html>234<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>Ten. main{width:200px; margin:0Auto} One. num{width:200px;height:30px; line-height:30px; border:1px Solid #666;} A. Num Span{position:relative;display:inline-block; min-width:1px; height:30px;} -. 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;} - @keyframes blink{ the0%{ - width:1px; - } -49.9999%{ + width:1px; - } +50%{ Awidth:0; at } -100%{ -width:0; - } - } -@-webkit-keyframes blink{ in0%{ - width:1px; to } +49.9999%{ - width:1px; the } *50%{ $width:0;Panax Notoginseng } -100%{ thewidth:0; + } A } the . key{display:none;height:120px; width:250px; position:absolute;left:60px;bottom:50px;} +. kc{width:160px;float: Left;} -. Key span{float: Left; width:30px;height:30px; margin:10px 10px 0 10px; LINE-HEIGHT:30PX;TEXT-ALIGN:CENTER;BORDER:1PX Solid #666;} $. Key em{width:80px;float: Left;} $. Key em i{display:block;width:60px;height:30px; margin:10px 0 10px 0; line-height:30px;text-align:center;border:1px s Olid #666; font-Style:normal} -. Key em. next{height:70px; line-height:70px; margin:10px 0 0;} -</style> the -<body>Wuyi<div class= "Main" > the<div class= "num" ><span></span></div> -<div class= "Key" > Wu<div class= "KC" ><span>1</span><span>2</span><span>3</span><span >4</span><span>5</span><span>6</span> -<span>7</span><span>8</span><span>9</span></div> About<em><i class= "del" > Delete </i><i class= "Next" > Next question </i></em> $</div> -</div> -<script src= "Js/jquery.min.js" type= "Text/javascript" ></script> -<script type= "Text/javascript" > A$ (". Num"). Click (function(){ +$ (". Key"). Show (); the$( This). addclass ("Active"); - return false; $ }); the the$ (document). Click (function () { the$ (". Num"). Removeclass ("Active"); the$ (". Key"). Hide (); - }); in the$ (". Key"). Click (function () { the return false; About }); the the$ (". Key span"). Click (function(){ the varKey = $ ( This). text (); +$ (". Num span"). HTML ($ (". Num span"). HTML () +key); - }) the$ (". Del"). Click (function(){ Bayi$ (". Num span"). HTML ($ (". Num span"). HTML (). substr (0,$ (". Num span"). HTML (). length-1)); the the }) - -</script> the</body> theHTML5 a custom numeric keypad