原理：使用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. 亲历H5移动端游戏微信支付接入及那些坑（四）——参考文档

    写完三篇后,我觉得微信支付的文档确实比较乱,所以在此做一个整理汇总 支付流程相关文档 一下文档已经按照接入顺序排列,请依次参考阅读 微信公众号网页授权两种access_token区别,获取用户open ...

  2. CTRL+SHIFT

    CTRL+SHIFT+鼠标左右,上下拖动,可快速实现平行和垂直上下复制的功能,

  3. django之创建第4-1个项目-访问dict数据

    1.修改index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. RHEL7 添加网卡并设置多个IP地址

    首先在虚拟机管理界面中给该虚拟机添加一块虚拟网卡,VirtualBox虚拟机中要shutdown才能添加. [root@rhel7 ~]# nmcli device show | grep -i de ...

  5. Docker安装和常用命令

    Docker安装 Docker的安装可以参考 https://docs.docker.com/ 下面的 Get Docker / Docker CE / Linux, 需要关注的主要是CentOS和U ...

  6. Arduino和C51开发OLED显示屏

    技术:51单片机.Arduino.OLED显示屏.U8glib   概述 OLED显示屏常常用作为智能产品的显示设备,本文简单介绍OLED显示屏的使用方法. 详细 代码下载:http://www.de ...

  7. java struts2入门学习--OGNL语言基本用法

    一.知识点学习 1.struts2中包含以下6种对象,requestMap,sessionMap,applicationMap,paramtersMap,attr,valueStack; 1)requ ...

  8. 关于JAVA路径 问题

    1.基本概念的理解  绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如: C:\xyz\test.txt 代表了test.txt文件的绝对路径.http://w ...

  9. LNMP分离式部署实例[转]

    很多人在练习部署LNMP环境的时候,大都数是部署在同一个虚拟机上面的.但是实际工作中,我们一般都是分离部署的. 今天我就用3台虚拟机,部署下LNMP环境.以供参考! 网络拓扑图: 首先准备3台虚拟机: ...

  10. openstack rpc机制

    一.概述: 在openstack项目中,api的调用规则: 跨项目:如nova调用keystone, glance,cinder等,使用rest api(通过相应的python-XXXclient 库 ...