原理：使用div模拟输入框，避免手机原生键盘弹出，键盘使用div模拟，点击事件使用js控制，光标闪烁使用css模拟，具体代码如下：

 <!doctype html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>key</title>

 <style>

 .main{width: 200px; margin:0 auto}

 .num{width: 200px;height: 30px; line-height:30px; border: 1px solid #666;}

 .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{

     0%{

         width: 1px;

     }

     49.9999%{

         width: 1px;

     }

     50%{

         width: 0;

     }

     100%{

         width: 0;

     }

 }

 @-webkit-keyframes blink{

     0%{

         width: 1px;

     }

     49.9999%{

         width: 1px;

     }

     50%{

         width: 0;

     }

     100%{

         width: 0;

     }

 }

 .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 solid #666; font-style:normal}

 .key em .next{height: 70px; line-height:70px; margin:10px 0  0;}

 </style>

 </head>

 <body>

 <div class="main">

 <div class="num"><span></span></div>

     <div class="key">

     <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>

     <em><i class="del">删除</i><i class="next">下一题</i></em>

     </div>

     </div>

     <script src="js/jquery.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(".num").click(function(){

             $(".key").show();

             $(this).addClass("active");

             return false;

         });

         $(document).click(function () {

             $(".num").removeClass("active");

             $(".key").hide();

         });

         $(".key").click(function () {

             return false;

         });

         $(".key span").click(function(){

             var key = $(this).text();

             $(".num span").html($(".num span").html()+key);

             })

         $(".del").click(function(){

             $(".num span").html($(".num span").html().substr(0,$(".num span").html().length-1));

             })

     </script>

 </body>

 </html>

html5自定义数字键盘的更多相关文章

  1. ios自定义数字键盘

    因为项目又一个提现的功能,textfiled文本框输入需要弹出数字键盘,首先想到的就是设置textfiled的keyboardType为numberPad,此时你会看到如下的效果:   但是很遗憾这样 ...

  2. GridLayout自定义数字键盘(两个EditText)

    功能说明: 适用于两个EditText输入框,并控制输入字符的长度,点击键盘中的"确定"按钮完成输入,点击"前一项"光标跳到前一个EditText 运行效果图如 ...

  3. h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

    html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...

  4. iOS数字键盘自定义按键

    UIKeyboardTypeNumberPad 数字键盘自定义按键 最近做一个搜索用户的功能,这里使用了UISearchBar.由于搜索的方式只有手机号码,所以这里的键盘要限制为数字输入,可以这么做: ...

  5. [HTML5]移动开发不同手机弹出数字键盘问题

    这里还是先那么先交代一下遇到的问题.其实无论是tel还是number都不是完美的:type="tel"优点是iOS和Android的键盘表现都差不多缺点是那些字母好多余,虽然我没有 ...

  6. 手机端访问web调用数字键盘。

    转自  http://www.webkfa.com/one4/w1937.html 最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel", ...

  7. （译）iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0)

    (译)iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0) 更新:ios4.1现在已经将这个做到SDK了.你可以设置键盘类型为UIKeyboardTypeDecimal ...

  8. 如何使用HTML5自定义数据属性

    在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...

  9. 前端angularJS利用directive实现移动端自定义软键盘的方法

    最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...

随机推荐

  1. POJ 2186 强联通分量

    点击打开链接 题意:牛A喜欢牛B,若牛B喜欢牛C,则牛A喜欢牛C,问最后多少牛被其它全部牛喜欢 思路:用强联通分量进行缩点,最后形成的图是有向无环图DAG.而拓扑序的值为DAG的长度,则加一,可是最后 ...

  2. RabbitMQ学习笔记1-hello world

    安装过程略过,一搜一大把. rabbitmq管理控制台:http://localhost:15672/   默认账户:guest/guest RabbitMQ默认监听端口:5672 JAVA API地 ...

  3. Screen2EXE录屏|录制视频

    Screen2EXE是一款具有独到压缩算法的屏幕录制软件,它可以记录用户在屏幕上的每一步操作,包括鼠标轨迹,点击动作给予花环提示,然后保存为不需播放器即可观看的exe可执行文件. 在生成录制文件的大小 ...

  4. 【OT1.0 + TP3.2】开启trace调试、输出调试信息、开启自定义菜单

    1.开启trace调试 A- 后台系统设置 show-page-trace = 1 B-config.php文件.配置 show-page-trace = true 2.输出调试信息 很奇怪,OT竟然 ...

  5. DOM，浏览器，javascript，html之间的关系

    来源于:https://github.com/hucheng91/myBlog/blob/master/web/dom/dom.md DOM定义 DOM可以以一种独立于平台和语言的方式访问和修改一个文 ...

  6. Axure快速原型教程02--创建页面和设置界面

    目录 Axure快速原型教程02--创建页面和设置界面 Axure快速原型教程01--原型说明下载和安装 首先,在左侧的面板中,我们发现有一个叫sitemap的面板,这个面板就是我们的一个个的页面了, ...

  7. ios中一级导航

    效果图 第一步先下载文件 http://pan.baidu.com/share/link?shareid=2148445651&uk=9237761877 将目录引入到xcode中 在xcod ...

  8. （原）使用1080Ti显卡时安装ubuntu16.04.1及驱动的步骤

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6811328.html 参考网址: http://www.cnblogs.com/darkknightz ...

  9. ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理

    ThinkPHP和jQuery EasyUI这两个都是不错的框架,现在要把它两个整合到一块,做个简单的Ajax调用查询. 在ThinkPHP模板中引入EasyUI的相关文件,然后设置按钮3的调用: & ...

  10. 【Algorithm】回溯法与深度优先遍历的异同

    1.相同点: 回溯法在实现上也是遵循深度优先的,即一步一步往前探索,而不像广度优先那样,由近及远一片一片地扫. 2.不同点 (1)访问序 深度优先遍历: 目的是“遍历”,本质是无序的.也就是说访问次序 ...