原理：使用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. 【PMP】十五至尊图

    以上是PMP的10大知识领域与5个过程组,在PMP考试中属于必须记忆的知识,该知识来源于PMBOK 第6版 附件为每日练习记忆模板,可以更好的记忆上图 点击下载附件

  2. SQL Manager Lite可视化工具部分中英对照

    .Refresh //刷新表数据 .compile,//提交数据. .connect to host //链接到服务器 .disconnect from all databases //断开链接 . ...

  3. 上海期货交易所CTP行情和交易接入

    发布时间:2018-09-25   技术:C++11,动态库的制作   概述 CTP的接入Demo 详细 代码下载:http://www.demodashi.com/demo/14125.html 本 ...

  4. ajax请求格式

    ajax请求格式........... var rowsData = $('#receiptPrintList').datagrid('getSelections'); $.ajax({ type: ...

  5. java struts2入门学习实例－－使用struts2快速实现上传

    一.文件上传快速入门 1).关于上传表单三要素 >>尽量以POST请求方式上传,因为GET支持文件大小是有限制的. >>必须要加上enctype="multipart ...

  6. 【SqlServer】如何把本地SqlServer数据库部署到远程服务器上

    这里笔者使用的使用SqlServer2012,本机和远程环境均为Win7. 1.选中需要部署的数据库,右击>任务>分离.选中删除连接. 2.现在在左侧的表中就看不见刚才那个数据了. 3.在 ...

  7. 百度OCR识别示例

    文章地址:https://www.cnblogs.com/Charltsing/p/OcrAnswerer.html 最新版为v4.1版,开放一定概率的八窗口体验功能,请截图体验(多点几次图片).更新 ...

  8. Easy APNs Provider 消息推送测试工具

    1.Easy APNs Provider 简介 Easy APNs Provider 是一款为 iOS.Mac App 提供推送测试的小工具. App Store 下载地址 Easy APNs Pro ...

  9. 《JAVA与模式》之迭代器模式

    定义:提供一种方法访问一个容器对象中各个元素,而又不暴露该对象的内部细节. 类型:行为类模式 类图: public static void main(String[] args) { List< ...

  10. FaceBook登陆API -- Login with API calls

    Login with API calls Related Topics Understanding sessions FBSession Error handling FBError FBLoginC ...