原生js制作简单的数字键盘


Posted in Javascript onApril 24, 2015

一、起因

最近支付的同事说,数字键盘有些问题;在移动设备上有时候比较难出现点(.) 和数字在一起的格局;因此,考虑到这种情况,就建议手写个模拟键盘了。花了一晚上的时间,写了个简单的键盘,基本能用。考虑到有的开发者没有使用juqery,就使用原生的js了。

Github地址:https://github.com/vczero/keyboard

二、截图如下

原生js制作简单的数字键盘

三、体验地址(需要点击input才能弹出数字键盘的哦)

URL: http://vczero.github.io/num_key/index.html

四、代码比较简单,直接贴了

;(function(exports){
  var KeyBoard = function(input, options){
    var body = document.getElementsByTagName('body')[0];
    var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';
    
    if(document.getElementById(DIV_ID)){
      body.removeChild(document.getElementById(DIV_ID));
    }
    
    this.input = input;
    this.el = document.createElement('div');
    
    var self = this;
    var zIndex = options && options.zIndex || 1000;
    var width = options && options.width || '100%';
    var height = options && options.height || '193px';
    var fontSize = options && options.fontSize || '15px';
    var backgroundColor = options && options.backgroundColor || '#fff';
    var TABLE_ID = options && options.table_id || 'table_0909099';
    var mobile = typeof orientation !== 'undefined';
    
    this.el.id = DIV_ID;
    this.el.style.position = 'absolute';
    this.el.style.left = 0;
    this.el.style.right = 0;
    this.el.style.bottom = 0;
    this.el.style.zIndex = zIndex;
    this.el.style.width = width;
    this.el.style.height = height;
    this.el.style.backgroundColor = backgroundColor;
    
    //样式
    var cssStr = '<style type="text/css">';
    cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#FFF;}';
    cssStr += '#' + TABLE_ID + ' td{width:33%;border:1px solid #ddd;border-right:0;border-top:0;}';
    if(!mobile){
      cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
    }
    cssStr += '</style>';
    
    //Button
    var btnStr = '<div style="width:60px;height:28px;background-color:#1FB9FF;';
    btnStr += 'float:right;margin-right:5px;text-align:center;color:#fff;';
    btnStr += 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer;">完成</div>';
    
    //table
    var tableStr = '<table id="' + TABLE_ID + '" border="0" cellspacing="0" cellpadding="0">';
      tableStr += '<tr><td>1</td><td>2</td><td>3</td></tr>';
      tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
      tableStr += '<tr><td>7</td><td>8</td><td>9</td></tr>';
      tableStr += '<tr><td style="background-color:#D3D9DF;">.</td><td>0</td>';
      tableStr += '<td style="background-color:#D3D9DF;">删除</td></tr>';
      tableStr += '</table>';
    this.el.innerHTML = cssStr + btnStr + tableStr;
    
    function addEvent(e){
      var ev = e || window.event;
      var clickEl = ev.element || ev.target;
      var value = clickEl.textContent || clickEl.innerText;
      if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除"){
        if(self.input){
          self.input.value += value;
        }
      }else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成"){
        body.removeChild(self.el);
      }else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
        var num = self.input.value;
        if(num){
          var newNum = num.substr(0, num.length - 1);
          self.input.value = newNum;
        }
      }
    }
    
    if(mobile){
      this.el.ontouchstart = addEvent;
    }else{
      this.el.onclick = addEvent;
    }
    body.appendChild(this.el);
  }
  
  exports.KeyBoard = KeyBoard;

})(window);

五、简单demo

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>模拟数字键盘</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
   </head>
   <body>
     <div>
       <input id="text1" readonly="readonly" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
       <br />
       <br />
       <input id="text2" readonly="readonly" type="number" style="height:28px;width:98%;outline:none;border:1px solid #1AB6FF;padding-left:3px;"/>
     </div>
     <script type="text/javascript" src="keyboard.js"></script>
     <script type="text/javascript">
     (function(){
       var input1 = document.getElementById('text1');
       var input2 = document.getElementById('text2');
       input1.onclick = function(){
         new KeyBoard(input1);
       };
       input2.onclick = function(){
         new KeyBoard(input2);
       };
     })();
     </script>
   </body>
 </html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Javascript中arguments和arguments.callee的区别浅析
Apr 24 #Javascript
Node.js实现Excel转JSON
Apr 24 #Javascript
js中for in语句的用法讲解
Apr 24 #Javascript
JScript中的条件注释详解
Apr 24 #Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 #Javascript
js闭包实现按秒计数
Apr 23 #Javascript
jQuery中使用each处理json数据
Apr 23 #Javascript
You might like
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
图片自动缩小 点击放大
2008/07/07 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python如何提升爬虫效率
2020/09/27 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
森林防火宣传标语
2014/06/27 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python