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

前端技术 2023/09/04 JavaScript

一、起因

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

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

二、截图如下

三、体验地址（需要点击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>

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

本文地址：https://www.stayed.cn/item/9619

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案