html5自定义数字键盘

最新推荐文章于 2025-06-20 22:21:57 发布

转载

最新推荐文章于 2025-06-20 22:21:57 发布 · 2.3k 阅读

文章标签：

#前端 #javascript #ViewUI

本文介绍了如何使用HTML5和JavaScript来创建一个自定义的数字键盘，以避免手机上原生键盘的弹出。通过使用div元素模拟输入框，结合JavaScript控制点击事件，以及CSS实现光标的闪烁效果，详细代码演示了这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：使用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