原理：使用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. 【shell】创建长目录，目录存在则忽略，缺失则创建

    有时候,我们需要创建一个空目录树,如果给定路径包含目录,那么还必须检查这些目录是否存在: mkdir –p /qinys/oliver/tmp/ 执行上述命令即可创建长目录,并且有则忽略,无则创建原则 ...

  2. mysql从时间字符串中取出日期数据

    addtime='2016-09-03 18:12:44' substr(addtime,1,10)  as 创建日期 SUBSTR(string, string charcter, number o ...

  3. HTML5音频audio属性

    来源:https://segmentfault.com/a/1190000008932943?utm_source=tuicool&utm_medium=referral audio 的控制函 ...

  4. linux rpm 安装后 mysql 默认安装目录等信息

    MySQL安装完成后不象SQL Server默认安装在一个目录,它的数据库文件.配置文件和命令文件分别在不同的目录,了解这些目录非常重要,尤其对于Linux的初学者,因为 Linux本身的目录结构就比 ...

  5. linux c server and client 简单的通信

    server.c #include <stdlib.h> #include <stdio.h> #include <errno.h> #include <st ...

  6. 【mysql】关于ICP、MRR、BKA等特性

    一.Index Condition Pushdown(ICP) Index Condition Pushdown (ICP)是mysql使用索引从表中检索行数据的一种优化方式,从mysql5.6开始支 ...

  7. samba服务的高级进阶配置

    本文将学习一下几个方面的内容,将会结合具体的实验来一步步实现. 1. 用户账号的映射 2. 使用IP对客户端进行访问控制 3. 使用域名对客户端进行访问控制 4. 使用通配符对客户端进行访问控制 5. ...

  8. git difftool 详解

    一.如何比较两个版本之间的差异 1.显示版本得到版本的commit id 2.执行difftool命令 按Y进行比较,我用的是DiffMerge这个软件对代码进行比较的 二.比较当前所修改的内容 gi ...

  9. NYOJ------汉诺塔（一）

    汉诺塔(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度 ...

  10. 使用import简化spring的配置 spring import 标签的解析 使用import或加载spring配置时，报错误There is no ID/IDREF 多个Spring配置文件import resource路径配置

    spring-import 标签的解析.使用案例: 对于spring配置文件的编写,我想,对于经历过庞大项目的人,都有那种恐惧的心理,太多的配置文件.不过,分模块都是大多数人能想到的方法,但是,怎么分 ...