原理：使用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. python模块之keyword

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python模块之keyword import keyword ''' >>> help( ...

  2. python模块之importlib(py3中功能有明显加强)

    # -*- coding: utf-8 -*-#python 27#xiaodeng#python模块之importlib(py3中功能有明显加强)

  3. RHEL6.5 grub修复测试

    RHEL6.5 grub修复测试 1.删除系统中的grub.conf配置文件,然后重启系统#rm -f /boot/grub/grub.conf#reboot 2.重启后,系统进入到grub界面:gr ...

  4. Ubuntu18.04, WPS表格生成中文大写数字的script

    =IF(ROUND(J9,2)<0,"无效数值",IF(ROUND(J9,2)=0,"零",IF(ROUND(J9,2)<1,"" ...

  5. 在QTableView中某列中添加Button的导致滚动条滚动的时候消失的问题

    之前在项目上需要在表格中加入Button是按照以下两个文章的做法: http://www.cnblogs.com/li-peng/p/3961843.html http://www.cnblogs.c ...

  6. （转载）【TP5.0】设置session有效时长+修改默认存储路径

        //查看默认session存储路径:print_r(session_save_path());   \thinkphp\helper.php if (!function_exists('ses ...

  7. ReactiveCocoa 5.0 初次了解

    RAC 5.0 相比于 4.0 有了巨大的变化,不仅是受 swift 3.0 大升级的影响,RAC 对自身项目结构的也进行了大幅度的调整.这个调整就是将 RAC 拆分为四个库:ReactiveCoco ...

  8. 构建高性能数据库缓存之redis（二）

    一.概述 在构建高性能数据库缓存之redis(一)这篇文档中,阐述了Redis数据库(key/value)的特点.功能以及简单的配置过程,相信阅读过这篇文档的朋友,对Redis数据库会有一点的了解,此 ...

  9. 树莓派进阶之路 (032) -字符问题（2） - 用c语言怎样得到一个汉字的GB2312编码(转)

    C/C++支持的是ASCII,不过汉字编码中,GB2312与ASCII是兼容的,所以可以在C中获得汉字的GB2312编码 GB2312是两个字节的,第一字节是高八位,第二字节是低八位,比如下面的程序: ...

  10. 微信图片分享遇到 checkArgs fail, thumbData is invalid

    该问题主要是微信图片限制32K以内的原因,可将bmpToByteArray方法进行进行改写. 原方法是: /** * 得到Bitmap的byte * @author netcorner * @para ...