基于jQ的H5端软键盘插件

本软键盘适用于移动端，基于jQuery库(操作DOM简单点)；目前该插件只开发出三种类型 ：支付密码键盘，纯数字键盘和常规键盘。

• 实际效果图

  
  1.png

2.png 3.png

• 参数说明

type 0-纯数字；1-常规键盘；2-支付密码键盘(支付密码键盘必须主动触发)，默认为1
eventNode 目标元素（主动调用触发时，该参数与assignEventNode必须存在一个）
assignEventNode 需要赋值的目标，不存在则默认赋值目标为eventNode(该值必须唯一)
clickCallBack 函数 所有按钮点击后调用的函数，不传则不执行(回传按键标识，总值和赋值对象)
isAssign 是否赋值，有些可能需要做特殊处理的，不需要直接给目标赋值，默认true-赋值

passWordLength 支付密码专用参数，密码的位数，不传默认6位
completeCallBack 函数 支付密码专用参数，密码输入完成后需要调用的函数(回传总值)
clickHidden 是否支持点击遮罩层隐藏，默认false-不支持
title 标题，支持html输入

• 调用方式分两种：主动调取（三种键盘类型都支持）和通过class绑定方式（不支持密码键盘类型）
• 调用方法（由于为了显示光标，主动调取方式请采用click事件，暂不兼容focus事件；同时，目标元素的focus事件会被重置）（光标效果只能用于app或使用div模拟Input，需要原生配合）

// 引入脚本后
1. 主动调取
keyBoard({
          eventNode: '.btn_01',
          type: 2,
          passWordLength: 6
});
2. 通过class调取（参数跟主动调取一直，除了clickCallBack，其它参数都是使用 “data-”的方式）
<input type="text"
                       data-type="1"
                       class="libh_key_board"
                       maxlength="15"
                       data-assignEventNode="buyMoney"
                       >
keyBoard({
          clickCallBack: function(flag, value, target) {
              // 通过class调取的，所有键盘返回函数处理都在此处
          }
});
3. 使用div模拟input(光标版)
<div placeholder="最低购买0.01元"
                         ref="buyMoney"
                         class="libh_input"
                         @click="handleInputClick">
                    </div>
window.keyBoard({
          type: 0,
          eventNode: ".money_amount",
        });

• 代码(代码没做优化，见谅了)

/**
*  自定义封装键盘，该键盘分两种 纯数字键盘 和 常规键盘
*  基于jQuery库
*  type 0-纯数字；1-常规键盘；2-支付密码键盘(支付密码键盘必须主动触发),默认为1
*  eventNode 目标元素
*  assignEventNode 需要赋值的目标，不存在则默认赋值目标为eventNode
*  passWordLength 密码的位数，不传默认6位
*  completeCallBack  密码输入完成后需要调用的函数(若同时存在passWordLength/completeCallBack/clickCallBack，则优先执行clickCallBack，再执行completeCallBack)
*  clickCallBack  所有按钮点击后调用的函数，不传则不执行
*  isAssign 是否赋值，有些可能需要做特殊处理的，不需要直接给目标赋值，默认true-赋值
*  clickHidden 是否支持点击遮罩层隐藏，默认false-不支持
*  title 标题，支持html输入
*  selectionStart 光标位置，该参数不支持支付密码键盘，且只支持目标INPUT元素
*  length 限制输出长度，默认不限制（支付键盘不可用）
*  author libh
*/
function keyBoard(params) {
  function NewKeyBoard() {
    this._default = {
      BODY_NODE: "libh_key_board", // 最外层键盘的ID值
      BODY_NODE_ID: "#libh_key_board ",
      EVENT_NODE_CLASS: ".libh_key_board ", // 触发键盘的目标class类名，主要用于被动触发
      inputValue: '', // 输入内容
      type: 1, // 键盘类型
      selectionStart: 0, // 光标位置，该参数不支持支付密码键盘
      eventType: 'click', // 事件方法
      isInput : true, // 默认触发目标为input元素
      length: 0,

      // 支付密码不支持以下参数
      isAssign: true, // 是否赋值
      EVENT_NODE_ORIGIN: '', // 触发键盘的元素
      EVENT_NODE: '', // 目标元素
      EVENT_NODE_TAGNAME: 'input', // 目标元素的标签
      clickCallBack: '', // 所有按钮点击后调用的函数

      // 支付密码专用参数
      title: '请输入交易密码', // 标题，支持html输入
      clickHidden: false, // 是否支持点击遮罩层隐藏
      completeCallBack: '', // 密码输入完成后需要调用的函数
      passWordLength: 6, // 密码长度
      hasInputValueLength: 0, // 已输入字符串长度
      passwordKeyPanel: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del'],

      // 纯数字键盘
      NumberKeyPanel: ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'del' , '0', 'enter'],

      // 常规键盘
      status: '0', // 0-小写；1-大写；2-字符
      routineNumberHtml: '', // 数字列html
      routineLowerHtml: '', // 小写列html
      routineUpperHtml: '', // 大写列html
      routineSymbolHtml: '', // 字符列html
      routineLetterLastHtml: '', // 字母底部列html
      routineSymbolLastHtml: '', // 字符底部列html
      routineNumberKeyPanel: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      routineLowerKeyPanel: [
        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
        ['upper', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del']
      ],
      routineUpperKeyPanel: [
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['lower', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del']
      ],
      routineSymbolKeyPanel: [
        ['<', '>', '{', '}', '(', ')', '[', ']', '$'],
        ['', '|', '%', '&', '*', '^', '/', '?', '!'],
        ['+', ':', ';', '"', "'", '`', '#'],
        ['@', '=', '~', '_', '-', ',', 'del']
      ],
      routineLetterLast: ['symbol', '.', 'blank', 'enter'],
      routineSymbolLast: ['letter', '.', 'blank', 'enter']
    }; // 设置默认值
  };

  // 绑定目标元素触发事件或主动生成键盘
  NewKeyBoard.prototype.addEvent = function() {
    var _this = this;
    var elems = document.querySelectorAll(_this._default.EVENT_NODE_CLASS);
    if(options.type !== '' && options.type !== null && options.type !== 'undefined') {
      window.event.stopPropagation();
      window.event.preventDefault();
      // 获取事件方式
      _this._default.eventType = window.event.type;
      // 密码键盘必须主动触发
      var _target = null;
      if(options.type != 2 && !options.eventNode) {
        console.error("目标不存在指定类名且不存在指定触发键盘类名");
        return;
      }
      // 判断赋值目标是否为eventNode
      if(options.assignEventNode) {
        _target = $(options.assignEventNode)[0];
      } else {
        _target = $(options.eventNode)[0];
      }

     _this._default.EVENT_NODE_ORIGIN = $(options.eventNode)[0];
     _this._default.type = options.type == '0' ? '0' : (options.type == '2' ? '2' : '1');
     _this._default.passWordLength = options.passWordLength;
     _this._default.completeCallBack = options.completeCallBack;
     _this._default.clickCallBack = options.clickCallBack;
     if(_this._default.type == '2') {
       // 支付密码键盘
       _this._default.inputValue = '';
       _this._default.hasInputValueLength = 0;
       if(options.passWordLength === '' || isNaN(options.passWordLength)) {
         _this._default.passWordLength = 6;
       } else {
         _this._default.passWordLength = parseInt(options.passWordLength);
       }
       if(options.title) {
         _this._default.title = options.title;
       }
       _this._default.EVENT_NODE = '';
       _this._default.EVENT_NODE_TAGNAME = '';
       _this._default.isAssign = true;
       _this._default.clickHidden = options.clickHidden;
     } else {
       _this._default.EVENT_NODE = _target;
       _this._default.EVENT_NODE_TAGNAME = _target.tagName;
       _this._default.isAssign = options.isAssign === false ? false : true;
       if(options.length === '' || isNaN(options.length)) {
         _this._default.length = 0;
       } else {
         _this._default.length = parseInt(options.length);
       }
       // 判断是否为input/textarea还是使用div构造的输入框
       if(_this._default.EVENT_NODE_TAGNAME.toLowerCase() == 'input' || _this._default.EVENT_NODE_TAGNAME.toLowerCase() == 'textarea') {
         _this._default.isInput = true;
         _this._default.inputValue = _this._default.EVENT_NODE.value;
       } else {
         _this._default.isInput = false;
         _this._default.inputValue = _this._default.EVENT_NODE.getAttribute("data-content") || "";
         $(".libh_change_key").each(function(index, elem) {
           $(elem).removeClass("libh_input_cursor");
           if(!$(elem).attr("data-content")) {
             $(elem).removeClass("libh_change_key");
           }
         });
         $(_this._default.EVENT_NODE).addClass("libh_change_key libh_input_cursor");
       }
     }
     _this.init();

    } else if(elems.length) {
      elems.forEach(function(elem) {
        $(elem).off('click');
        $(elem).on('click', function(e) {
          window.event.stopPropagation();
          window.event.preventDefault();
          // 获取事件方式
          _this._default.eventType = window.event.type;

          var type = e.target.getAttribute('data-type');
          var _target_id = e.target.getAttribute('data-assignEventNode');
          var _target_isAssign = e.target.getAttribute('data-isAssign');
          var _target_passWordLength = e.target.getAttribute('data-passWordLength');
          var _target_length = e.target.getAttribute('data-length');
          var _target = null;
          // 判断赋值目标是否为事件对象
          // 为保证唯一性，请使用ID配对
          if(_target_id) {
            if($("#" + _target_id).length) {
              _target = $("#" + _target_id)[0];
            } else {
              _target = $("." + _target_id)[0];
            }
          } else {
            _target = e.target;
          }
          _this._default.EVENT_NODE_ORIGIN = e.target;
          _this._default.EVENT_NODE = _target;
          _this._default.EVENT_NODE_TAGNAME = _target.tagName;
          _this._default.type = type == '0' ? '0' : '1';// 支付密码键盘必须主动触发，这里不做支付密码键盘处理
          _this._default.isAssign = _target_isAssign === false ? false : true;
          _this._default.passWordLength = _target_passWordLength;
          _this._default.completeCallBack = ''; // 被动调起软键盘的暂不支持
          _this._default.clickCallBack = options.clickCallBack;
          if(_target_length === '' || isNaN(_target_length)) {
            _this._default.length = 0;
          } else {
            _this._default.length = parseInt(_target_length);
          }

          // 判断是否为input/textarea还是使用div构造的输入框
          if(_this._default.EVENT_NODE_TAGNAME.toLowerCase() == 'input' || _this._default.EVENT_NODE_TAGNAME.toLowerCase() == 'textarea') {
            _this._default.isInput = true;
            _this._default.inputValue = _this._default.EVENT_NODE.value;
          } else {
            _this._default.isInput = false;
            _this._default.inputValue = _this._default.EVENT_NODE.getAttribute("data-content") || "";
            $(".libh_change_key").each(function(index, elem) {
              $(elem).removeClass("libh_input_cursor");
              if(!$(elem).attr("data-content")) {
                console.log(33333)
                $(elem).removeClass("libh_change_key");
              }
            });
            $(_this._default.EVENT_NODE).addClass("libh_change_key libh_input_cursor");
          }
          _this.init();
        })
      })
    } else {
      console.error("目标不存在指定类名且不存在指定触发键盘类名")
    }
  };

  // 初始化
  NewKeyBoard.prototype.init = function() {
    var _this = this;
    var _parentNode = document.querySelector(_this._default.BODY_NODE_ID);
    var _type = _parentNode ? _parentNode.getAttribute("type") : null;
    if(_parentNode && _type !== _this._default.type) {
      document.querySelector(_this._default.BODY_NODE_ID).parentNode.removeChild(document.querySelector(_this._default.BODY_NODE_ID));
    }
    // 初始化分两种情况，一种已存在一样类型的键盘，一种不存在或存在不同类型的键盘
    if(_parentNode && _type == _this._default.type) {
      _parentNode.setAttribute("display", 'block');
      if(_this._default.type == '1') {
        if(_this._default.status == '0') {
          // 目前为小写键盘
        } else if(_this._default.status == '1') {
          $(_this._default.BODY_NODE_ID + ".board_middle_content").html(_this._default.routineLowerHtml);
        } else if(_this._default.status == '2') {
          var html = _this._default.routineNumberHtml
                    +'<div class="board_middle_content">'
                    +     _this._default.routineLowerHtml
                    +'</div>'
          $(_this._default.BODY_NODE_ID + ".board_main_content").html(html);
          $(_this._default.BODY_NODE_ID + ".board_bottom_content").html(_this._default.routineLetterLastHtml);
        }
        _this._default.status = '0';
        $(_this._default.BODY_NODE_ID).removeClass('routine_down_fade').addClass('routine_up_fade');
        _this.addRoutineEvent();
        // 全局监听事件
        // $(document).off('’focus', 'body.libh_key_board_flag');
        $(document).off(_this._default.eventType, 'body.libh_key_board_flag');
        // 全局监听事件
        $(document).on(_this._default.eventType, 'body.libh_key_board_flag', _this.hideKeyBoard);
      } else if(_this._default.type == '2') {
        $(_this._default.BODY_NODE_ID).removeClass('password_down_fade').addClass('password_up_fade');
        _this.addPasswordEvent();
      } else {
        $(_this._default.BODY_NODE_ID).removeClass('number_down_fade').addClass('number_up_fade');
        _this.addNumberEvent();
        // 全局监听事件
        $(document).off(_this._default.eventType, 'body.libh_key_board_flag');
        // 全局监听事件
        $(document).on(_this._default.eventType, 'body.libh_key_board_flag', _this.hideKeyBoard);
      }
    } else {
      if(_this._default.type == 1) {
        _this.generateRoutineNumberHtml();
        _this.generateRoutineLowerHtml();
        _this.generateRoutineLetterLastHtml();
        var routineHtml = _this.generateRoutineHtml();
        $("body").append(routineHtml);
        _this.addRoutineEvent();
        _this.generateRoutineUpperHtml();
        _this.generateRoutineSymbolHtml();
        _this.generateRoutineSymbolLastHtml();
      } else if(_this._default.type == 2) {
        _this._default.passwordHtml = $(_this.generatePasswordHtml());
        $("body").append(_this._default.passwordHtml);
        _this.addPasswordEvent();
      } else {
        _this._default.numberElem = $(_this.generateNumberHtml());
        $("body").append(_this._default.numberElem);
        _this.addNumberEvent();
      }

      // 全局监听事件
      $(document).off(_this._default.eventType, 'body.libh_key_board_flag');
      // 全局监听事件
      $(document).on(_this._default.eventType, 'body.libh_key_board_flag', _this.hideKeyBoard);
    }
  };

  // 生成纯数字键盘代码
  NewKeyBoard.prototype.generateNumberHtml = function() {
    var _this = this;
    var numberHtml = '<div id="' + _this._default.BODY_NODE +'" class="number_up_fade" type="0" display="block">'
                     +' <table width="100%" border="0" cellspacing="0" cellpadding="0" class="random">'
                     +'   <tbody>'
                     +'     <tr>'
    _this._default.NumberKeyPanel.forEach(function(num, key) {
      if(key == 0 || key % 3) {
        if(num == 'enter') {
          numberHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="'+num+'">确定</a></td>'
        } else if(num == 'del') {
          numberHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="del"><svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve"><rect opacity="0.5" fill="none"></rect><g><g><path fill="#666" d="M76,25v34H23L8.9,42L23,25H76 M79,22H21.6L5,42l16.6,20H79V22L79,22z"></path></g><polygon fill="#666" points="41.3,53 49.6,44.7 57.9,53 60.6,50.3 52.3,42 60.6,33.7 57.9,31 49.6,39.3 41.3,31 38.6,33.7 46.9,42 38.6,50.3  "></polygon></g></svg></a></td>'
        } else {
          numberHtml +=   '        <td><a herf="javascript:void(0)" class="click_event" flag="'+num+'">'+num+'</a></td>'
        }
      } else {
        numberHtml +=   '     </tr>'
                    +  '     <tr>';
        if(num == 'enter') {
          numberHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="'+num+'">确定</a></td>'
        } else if(num == 'del') {
          numberHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="del"><svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve"><rect opacity="0.5" fill="none"></rect><g><g><path fill="#666" d="M76,25v34H23L8.9,42L23,25H76 M79,22H21.6L5,42l16.6,20H79V22L79,22z"></path></g><polygon fill="#666" points="41.3,53 49.6,44.7 57.9,53 60.6,50.3 52.3,42 60.6,33.7 57.9,31 49.6,39.3 41.3,31 38.6,33.7 46.9,42 38.6,50.3  "></polygon></g></svg></a></td>'
        } else {
          numberHtml +=   '        <td><a herf="javascript:void(0)" class="click_event" flag="'+num+'">'+num+'</a></td>'
        }
      }
    });
      numberHtml +=   '     </tr>'
                   +  '   </tbody>'
                   +  ' </table>'
                   +  '</div>';
    return numberHtml;
  }

  // 生成支付密码键盘
  NewKeyBoard.prototype.generatePasswordHtml = function() {
    var _this = this;
    var passwordHtml ='<div id="' + _this._default.BODY_NODE +'" class="password_popup password_up_fade" type="2" display="block">'
                     +'  <div class="libh_key_board_pop"></div>'
                     +'  <div class="libh_cipher_box">'
                     +'    <p class="back_btn"><a herf="javascript:void(0)" class="close_btn"></a>请输入支付密码</p>'
                     +'    <div class="libh_cipher_box_content">'
                     +'       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="random">'
                     +'         <tbody>'
                     +'           <tr>'
    for(var i = 0; i < _this._default.passWordLength; i++) {
      passwordHtml += '             <td><a herf="javascript:void(0)"></a></td>';
    }
      passwordHtml += '           </tr>'
                     +'         </tbody>'
                     +'       </table>'
                     +'     </div>'
                     +'   </div>'
                     +'  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="random password_table">'
                     +'   <tbody>'
                     +'     <tr>'
    _this._default.passwordKeyPanel.forEach(function(num, key) {
      if(key == 0 || key % 3) {
        if(num === '') {
          passwordHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="enter">'+num+'</a></td>'
        } else if(num == 'del') {
          passwordHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="del"><svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve"><rect opacity="0.5" fill="none"></rect><g><g><path fill="#666" d="M76,25v34H23L8.9,42L23,25H76 M79,22H21.6L5,42l16.6,20H79V22L79,22z"></path></g><polygon fill="#666" points="41.3,53 49.6,44.7 57.9,53 60.6,50.3 52.3,42 60.6,33.7 57.9,31 49.6,39.3 41.3,31 38.6,33.7 46.9,42 38.6,50.3    "></polygon></g></svg></a></td>'
        } else {
          passwordHtml +=   '        <td><a herf="javascript:void(0)" class="click_event" flag="'+num+'">'+num+'</a></td>'
        }
      } else {
        passwordHtml +=   '     </tr>'
                       +  '     <tr>';
        if(num === '') {
          passwordHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="enter">'+num+'</a></td>'
        } else if(num == 'del') {
          passwordHtml +=   '        <td><a herf="javascript:void(0)" class="click_event font_style" flag="del"><svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve"><rect opacity="0.5" fill="none"></rect><g><g><path fill="#666" d="M76,25v34H23L8.9,42L23,25H76 M79,22H21.6L5,42l16.6,20H79V22L79,22z"></path></g><polygon fill="#666" points="41.3,53 49.6,44.7 57.9,53 60.6,50.3 52.3,42 60.6,33.7 57.9,31 49.6,39.3 41.3,31 38.6,33.7 46.9,42 38.6,50.3    "></polygon></g></svg></a></td>'
        } else {
          passwordHtml +=   '        <td><a herf="javascript:void(0)" class="click_event" flag="'+num+'">'+num+'</a></td>'
        }
      }
    });
      passwordHtml +=   '     </tr>'
                   +  '   </tbody>'
                   +  ' </table>'
                   +  '</div>';
    return passwordHtml;
  }

  // 生成常规键盘
  NewKeyBoard.prototype.generateRoutineHtml = function() {
    var _this = this;
    var routineHtml ='<div id="' + _this._default.BODY_NODE +'" class="routine_board routine_up_fade" type="1" display="block">'
                     +'  <div class="board_main_content">'
                     +      _this._default.routineNumberHtml
                     +'     <div class="board_middle_content">'
                     +        _this._default.routineLowerHtml
                     +'     </div>'
                     +'   </div>'
                     +'   <div class="board_bottom_content">'
                     +      _this._default.routineLetterLastHtml
                     +'   </div>'
                     +'</div>';

    return routineHtml;
  }

  // 生成数字列
  NewKeyBoard.prototype.generateRoutineNumberHtml = function() {
    var routineNumberHtml = '<p>';
    this._default.routineNumberKeyPanel.forEach(function(number) {
      routineNumberHtml   +='<i class="click_event" flag="'+number+'">'+number+'</i>';
    })
    routineNumberHtml    += '</p>';
    this._default.routineNumberHtml = routineNumberHtml;
  }

  // 生成小写字母列
  NewKeyBoard.prototype.generateRoutineLowerHtml = function() {
    var routineLowerHtml = '';
    this._default.routineLowerKeyPanel.forEach(function(letters, index) {
      if(index == 1) {
        routineLowerHtml  += '<p class="line_invagination">';
      } else {
        routineLowerHtml  += '<p>';
      }
      letters.forEach(function(letter) {
        if(letter === 'upper') {
          routineLowerHtml+='<i class="click_event tab-upper" flag="'+letter+'">'
                            + '<svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve">'
                            + ' <rect opacity="0.5" fill="none" width="84" height="84"></rect>'
                            + ' <g>'
                            + '   <path fill="#fff" d="M 40,3 L 80,40 L 60,40 L 60,70 L 20,70 L 20,40 L 0,40 Z " stroke="#666666"></path>'
                            + ' </g>'
                            + '</svg>'
                            +'</i>';
        } else if(letter === 'del') {
          routineLowerHtml+='<i class="click_event key-delete" flag="'+letter+'"><svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve"><rect opacity="0.5" fill="none"></rect><g><g><path fill="#666" d="M76,25v34H23L8.9,42L23,25H76 M79,22H21.6L5,42l16.6,20H79V22L79,22z"></path></g><polygon fill="#666" points="41.3,53 49.6,44.7 57.9,53 60.6,50.3 52.3,42 60.6,33.7 57.9,31 49.6,39.3 41.3,31 38.6,33.7 46.9,42 38.6,50.3   "></polygon></g></svg></i>';
        } else {
          routineLowerHtml+='<i class="click_event" flag="'+letter+'">'+letter+'</i>';
        }
      })
      routineLowerHtml    += '</p>';
    })
    this._default.routineLowerHtml = routineLowerHtml;
  }

  // 生成大写字母列
  NewKeyBoard.prototype.generateRoutineUpperHtml = function() {
    var routineUpperHtml = '';
    this._default.routineUpperKeyPanel.forEach(function(letters, index) {
      if(index == 1) {
        routineUpperHtml  += '<p class="line_invagination">';
      } else {
        routineUpperHtml  += '<p>';
      }
      letters.forEach(function(letter) {
        if(letter === 'lower') {
          routineUpperHtml+='<i class="click_event tab-upper" flag="'+letter+'">'
                            + '<svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve">'
                            + ' <rect opacity="0.5" fill="none" width="84" height="84"></rect>'
                            + ' <g>'
                            + '   <path fill="#7A7A7A" d="M 40,3 L 80,40 L 60,40 L 60,70 L 20,70 L 20,40 L 0,40 Z "></path>'
                            + ' </g>'
                            + '</svg>'
                            +'</i>';
        } else if(letter === 'del') {
          routineUpperHtml+='<i class="click_event key-delete" flag="'+letter+'"><svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve"><rect opacity="0.5" fill="none"></rect><g><g><path fill="#666" d="M76,25v34H23L8.9,42L23,25H76 M79,22H21.6L5,42l16.6,20H79V22L79,22z"></path></g><polygon fill="#666" points="41.3,53 49.6,44.7 57.9,53 60.6,50.3 52.3,42 60.6,33.7 57.9,31 49.6,39.3 41.3,31 38.6,33.7 46.9,42 38.6,50.3   "></polygon></g></svg></i>';
        } else {
          routineUpperHtml+='<i class="click_event" flag="'+letter+'">'+letter+'</i>';
        }
      })
      routineUpperHtml    += '</p>';
    })
    this._default.routineUpperHtml = routineUpperHtml;
  }

  // 生成字符列
  NewKeyBoard.prototype.generateRoutineSymbolHtml = function() {
    var routineSymbolHtml = '';
    this._default.routineSymbolKeyPanel.forEach(function(letters, index) {
      if(index == 2 || index == 3) {
        routineSymbolHtml  += '<p class="line_invagination02">';
      } else {
        routineSymbolHtml  += '<p>';
      }
      letters.forEach(function(letter) {
        if(letter === 'del') {
          routineSymbolHtml+='<i class="click_event symbol_del" flag="'+letter+'"><svg width="42px" height="42px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 84 84" enable-background="new 0 0 84 84" xml:space="preserve"><rect opacity="0.5" fill="none"></rect><g><g><path fill="#666" d="M76,25v34H23L8.9,42L23,25H76 M79,22H21.6L5,42l16.6,20H79V22L79,22z"></path></g><polygon fill="#666" points="41.3,53 49.6,44.7 57.9,53 60.6,50.3 52.3,42 60.6,33.7 57.9,31 49.6,39.3 41.3,31 38.6,33.7 46.9,42 38.6,50.3  "></polygon></g></svg></i>';
        } else {
          routineSymbolHtml+='<i class="click_event" flag="'+letter+'">'+letter+'</i>';
        }
      })
      routineSymbolHtml    += '</p>';
    })
    this._default.routineSymbolHtml = routineSymbolHtml;
  }

  // 生成字母底部列
  NewKeyBoard.prototype.generateRoutineLetterLastHtml = function() {
    var routineLetterLastHtml = '<p>';
    this._default.routineLetterLast.forEach(function(letter) {
      if(letter === 'symbol') {
        routineLetterLastHtml+='<i class="click_event tab-num" flag="'+letter+'">#=+</i>';
      } else if(letter === 'blank') {
        routineLetterLastHtml+='<i class="click_event tab-blank" flag="'+letter+'">空格</i>';
      } else if(letter === 'enter') {
        routineLetterLastHtml+='<i class="click_event tab-enter" flag="'+letter+'">确定</i>';
      } else {
        routineLetterLastHtml+='<i class="click_event tab-point" flag="'+letter+'">'+letter+'</i>';
      }
    })
    routineLetterLastHtml    += '</p>';
    this._default.routineLetterLastHtml = routineLetterLastHtml;
  }

  // 生成字符底部列
  NewKeyBoard.prototype.generateRoutineSymbolLastHtml = function() {
    var routineSymbolLastHtml = '<p>';
    this._default.routineSymbolLast.forEach(function(letter) {
      if(letter === 'letter') {
        routineSymbolLastHtml+='<i class="click_event tab-num" flag="'+letter+'">abc</i>';
      } else if(letter === 'blank') {
        routineSymbolLastHtml+='<i class="click_event tab-blank" flag="'+letter+'">空格</i>';
      } else if(letter === 'enter') {
        routineSymbolLastHtml+='<i class="click_event tab-enter" flag="'+letter+'">确定</i>';
      } else {
        routineSymbolLastHtml+='<i class="click_event tab-point" flag="'+letter+'">'+letter+'</i>';
      }
    })
    routineSymbolLastHtml    += '</p>';
    this._default.routineSymbolLastHtml = routineSymbolLastHtml;
  }

  // 纯数字键盘的事件绑定
  NewKeyBoard.prototype.addNumberEvent = function() {
    var _this = this;
    $(_this._default.BODY_NODE_ID).off('click');
    $(_this._default.BODY_NODE_ID).on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      if(_this._default.isInput) {
        _this._default.selectionStart = _this.getCaretPosition(); // 获取光标位置
        _this.setCaretPosition(); // 设置光标位置
      }
    });
    $(_this._default.BODY_NODE_ID).off('touchstart', '.click_event');
    $(_this._default.BODY_NODE_ID).on('touchstart', '.click_event', function(e) {
      var flag = $(this)[0].getAttribute("flag");
      if(flag !== "del") {
        e.target.style.backgroundColor = "#cccdd0";
        e.target.style.color = "#fff";
      }
    });
    $(_this._default.BODY_NODE_ID).off('touchend', '.click_event');
    $(_this._default.BODY_NODE_ID).on('touchend', '.click_event', function(e) {
      e.preventDefault();
      e.stopPropagation();
      // 判断是否为input/textarea还是使用div构造的输入框
      if(_this._default.isInput) {
        _this._default.inputValue = _this._default.EVENT_NODE.value;
      } else {
        _this._default.inputValue = _this._default.EVENT_NODE.getAttribute("data-content") || "";
      }
      var flag = $(this)[0].getAttribute("flag");
      if(flag !== "del") {
        e.target.style.backgroundColor = "#fff";
        e.target.style.color = "#666";
      }
      if(flag == "enter") {
        $(_this._default.BODY_NODE_ID).attr("display", 'none');
        $(_this._default.BODY_NODE_ID).removeClass('number_up_fade').addClass('number_down_fade');
        if(typeof(_this._default.clickCallBack) == "function") {
          _this._default.clickCallBack(flag, _this._default.inputValue, _this._default.EVENT_NODE);
        }
        if(!_this._default.isInput) {
          $(_this._default.EVENT_NODE).removeClass("libh_input_cursor");
          if(!_this._default.inputValue) {
            $(_this._default.EVENT_NODE).removeClass("libh_change_key");
          }
        }
        return;
      } else if(flag == "del") {
        var value = _this._default.inputValue;
        if(_this._default.isInput) {
          if(value !== '') {
            _this._default.selectionStart = _this.getCaretPosition(); // 获取光标位置
            _this._default.inputValue = value.substring(0, _this._default.selectionStart - 1) + value.substring(_this._default.selectionStart, value.length);
            _this._default.selectionStart -= 1;
          }
        } else {
          _this._default.inputValue = value.substring(0, value.length - 1);
        }
      } else {
        if(_this._default.isInput) {
          var value = _this._default.inputValue;
          if(value !== '' && !(_this._default.length > 0 && value.length >= _this._default.length)) {
            _this._default.selectionStart = _this.getCaretPosition(); // 获取光标位置
            _this._default.inputValue = value.substring(0, _this._default.selectionStart) + flag + value.substring(_this._default.selectionStart, value.length);
            _this._default.selectionStart += 1;
          }
        } else {
          if(!(_this._default.length > 0 && _this._default.inputValue.length >= _this._default.length)) {
            _this._default.inputValue += flag;
          }
        }
      }

      if(_this._default.isAssign) {
        if(_this._default.isInput) {
          _this._default.EVENT_NODE.value = _this._default.inputValue;
          _this.setCaretPosition(); // 设置光标位置
        } else {
          // _this._default.EVENT_NODE.innerHTML = _this._default.inputValue;
          _this._default.EVENT_NODE.setAttribute("data-content", _this._default.inputValue);
        }
      }
      if(typeof(_this._default.clickCallBack) == "function") {
        _this._default.clickCallBack(flag, _this._default.inputValue, _this._default.EVENT_NODE);
      }
    });
  }

  // 支付密码键盘的事件绑定
  NewKeyBoard.prototype.addPasswordEvent = function() {
    var _this = this;
    if(_this._default.clickHidden) {
      // 点击遮罩层关闭支付键盘
      $(_this._default.BODY_NODE_ID).off('click', ".libh_key_board_pop");
      $(_this._default.BODY_NODE_ID).on('click', ".libh_key_board_pop", function() {
        $(_this._default.BODY_NODE_ID).attr("display", 'none');
        $(_this._default.BODY_NODE_ID).removeClass('password_up_fade').addClass('password_down_fade');
        var passwordElem = $(_this._default.BODY_NODE_ID+" .libh_cipher_box_content td");
        passwordElem.find("a").html('');
      });
    }
    // 关闭支付键盘
    $(_this._default.BODY_NODE_ID).off('click', ".close_btn");
    $(_this._default.BODY_NODE_ID).on('click', ".close_btn", function(e) {
      e.preventDefault();
      e.stopPropagation();
      $(_this._default.BODY_NODE_ID).attr("display", 'none');
      $(_this._default.BODY_NODE_ID).removeClass('password_up_fade').addClass('password_down_fade');
      var passwordElem = $(_this._default.BODY_NODE_ID+" .libh_cipher_box_content td");
      passwordElem.find("a").html('');
    });
    $(_this._default.BODY_NODE_ID).off('touchstart', '.click_event');
    $(_this._default.BODY_NODE_ID).on('touchstart', '.click_event', function(e) {
      e.target.style.backgroundColor = "#cccdd0";
      e.target.style.color = "#fff";
    });
    $(_this._default.BODY_NODE_ID).off('touchend', '.click_event');
    $(_this._default.BODY_NODE_ID).on('touchend', '.click_event', function(e) {
      var flag = $(this)[0].getAttribute("flag");
      if(flag !== "del") {
        e.target.style.backgroundColor = "#fff";
        e.target.style.color = "#666";
      }
    });
    $(_this._default.BODY_NODE_ID).off('click', '.click_event');
    $(_this._default.BODY_NODE_ID).on('click', '.click_event', function(e) {
      var flag = $(this)[0].getAttribute("flag");
      var passwordElem = $(_this._default.BODY_NODE_ID+" .libh_cipher_box_content td");
      if(flag == "del") {
        var value = _this._default.inputValue;
        if(value.length) {
          _this._default.inputValue = value.substring(0, value.length - 1);
          passwordElem.eq(value.length - 1).find("a").html('');
        }
      } else {
        _this._default.inputValue += flag;
        passwordElem.eq(_this._default.inputValue.length - 1).find("a").html('*');

        if(_this._default.inputValue.length === _this._default.passWordLength) {
          $(_this._default.BODY_NODE_ID).attr("display", 'none');
          $(_this._default.BODY_NODE_ID).removeClass('password_up_fade').addClass('password_down_fade');
          passwordElem.find("a").html('');
          if(typeof(_this._default.completeCallBack) == "function") {
            _this._default.completeCallBack( _this._default.inputValue);
          }
        }
      }
    });
  }

  // 常规键盘事件绑定
  NewKeyBoard.prototype.addRoutineEvent = function() {
    var _this = this;
    $(_this._default.BODY_NODE_ID).off('click');
    $(_this._default.BODY_NODE_ID).on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      if(_this._default.isInput) {
        _this._default.selectionStart = _this.getCaretPosition(); // 获取光标位置
        _this.setCaretPosition(); // 设置光标位置
      }
    });
    $(_this._default.BODY_NODE_ID).off('touchstart', '.click_event');
    $(_this._default.BODY_NODE_ID).on('touchstart', '.click_event', function(e) {
      var flag = $(this)[0].getAttribute("flag");
      if(flag !== "del") {
        e.target.style.backgroundColor = "#cccdd0";
        e.target.style.color = "#fff";
      }
    });
    $(_this._default.BODY_NODE_ID).off('touchend', '.click_event');
    $(_this._default.BODY_NODE_ID).on('touchend', '.click_event', function(e) {
      e.preventDefault();
      e.stopPropagation();
      // 判断是否为input/textarea还是使用div构造的输入框
      if(_this._default.isInput) {
        _this._default.inputValue = _this._default.EVENT_NODE.value;
      } else {
        _this._default.inputValue = _this._default.EVENT_NODE.getAttribute("data-content") || "";
      }
      var flag = $(this)[0].getAttribute("flag");
      if(flag !== "del") {
        e.target.style.backgroundColor = "#fff";
        e.target.style.color = "#666";
      }
      if(flag === "upper") {
        // 切换成大写
        $(_this._default.BODY_NODE_ID + ".board_middle_content").html(_this._default.routineUpperHtml);
        _this.addRoutineEvent();
        if(_this._default.isInput) {
          _this.setCaretPosition(); // 设置光标位置
        }
        return;
      } else if(flag === "lower") {
        // 切换成小写
        $(_this._default.BODY_NODE_ID + ".board_middle_content").html(_this._default.routineLowerHtml);
        _this.addRoutineEvent();
        if(_this._default.isInput) {
          _this.setCaretPosition(); // 设置光标位置
        }
        return;
      } else if(flag === "symbol") {
        // 切换成字符
        $(_this._default.BODY_NODE_ID + ".board_main_content").html(_this._default.routineSymbolHtml);
        $(_this._default.BODY_NODE_ID + ".board_bottom_content").html(_this._default.routineSymbolLastHtml);
        _this.addRoutineEvent();
        if(_this._default.isInput) {
          _this.setCaretPosition(); // 设置光标位置
        }
        return;
      } else if(flag === "letter") {
        // 切换成字母
        var html = _this._default.routineNumberHtml
                  +'<div class="board_middle_content">'
                  +     _this._default.routineLowerHtml
                  +'</div>'
        $(_this._default.BODY_NODE_ID + ".board_main_content").html(html);
        $(_this._default.BODY_NODE_ID + ".board_bottom_content").html(_this._default.routineLetterLastHtml);
        _this.addRoutineEvent();
        if(_this._default.isInput) {
          _this.setCaretPosition(); // 设置光标位置
        }
        return;
      } else if(flag === "del") {
          var value = _this._default.inputValue;
          if(_this._default.isInput) {
            if(value !== '') {
              // _this._default.inputValue = value.substring(0, value.length - 1);
              _this._default.selectionStart = _this.getCaretPosition(); // 获取光标位置
              _this._default.inputValue = value.substring(0, _this._default.selectionStart - 1) + value.substring(_this._default.selectionStart, value.length);
              _this._default.selectionStart -= 1;
            }
          } else {
            _this._default.inputValue = value.substring(0, value.length - 1);
          }
      } else if(flag === "enter") {
          $(_this._default.BODY_NODE_ID).attr("display", 'none');
          $(_this._default.BODY_NODE_ID).removeClass('routine_up_fade').addClass('routine_down_fade');
          if(typeof(_this._default.clickCallBack) == "function") {
            _this._default.clickCallBack(flag, _this._default.inputValue, _this._default.EVENT_NODE);
          }
          if(!_this._default.isInput) {
            $(_this._default.EVENT_NODE).removeClass("libh_input_cursor");
            if(!_this._default.inputValue) {
              $(_this._default.EVENT_NODE).removeClass("libh_change_key");
            }
          }
          return;
      } else if(flag === "blank") {
          if(_this._default.isInput) {
            if(!(_this._default.length > 0 && value.length >= _this._default.length)) {
              _this._default.selectionStart = _this.getCaretPosition(); // 获取光标位置
              var value = _this._default.inputValue;
              _this._default.inputValue = value.substring(0, _this._default.selectionStart) + ' ' + value.substring(_this._default.selectionStart, value.length);
              _this._default.selectionStart += 1;
            }
          } else {
            _this._default.inputValue += '';
          }
      } else {
        if(_this._default.isInput) {
          var value = _this._default.inputValue;
          if(value !== '' && !(_this._default.length > 0 && value.length >= _this._default.length)) {
            _this._default.selectionStart = _this.getCaretPosition(); // 获取光标位置
            _this._default.inputValue = value.substring(0, _this._default.selectionStart) + flag + value.substring(_this._default.selectionStart, value.length);
            _this._default.selectionStart += 1;
          }
        } else {
          if(!(_this._default.length > 0 && _this._default.inputValue.length >= _this._default.length)) {
            _this._default.inputValue += flag;
          }
        }
      }
      if(_this._default.isAssign) {
        if(_this._default.isInput) {
          _this._default.EVENT_NODE.value = _this._default.inputValue;
          _this.setCaretPosition(); // 设置光标位置
        } else {
          _this._default.EVENT_NODE.setAttribute("data-content", _this._default.inputValue);
        }
      }
      if(typeof(_this._default.clickCallBack) == "function") {
        _this._default.clickCallBack(flag, _this._default.inputValue, _this._default.EVENT_NODE);
      }
    });
  }

  // 获得光标位置兼容IE FF
  NewKeyBoard.prototype.getCaretPosition = function() {
      var _this = this;
      var result = 0;
      if (!isNaN(_this._default.EVENT_NODE.selectionStart)) { //IE以外
          result = _this._default.EVENT_NODE.selectionStart;
      } else { //IE
          try{
              var rng;
              if (_this._default.EVENT_NODE.tagName == "textarea") { //TEXTAREA
                  rng = event.srcElement.createTextRange();
                  rng.moveToPoint(event.x, event.y);
              } else { //Text
                  rng = document.selection.createRange();
              }
              rng.moveStart("character", -event.srcElement.value.length);
              result = rng.text.length;
          }catch (e){
              throw new Error(10,"获取光标位置失败")
          }
      }
      return result;
  }

  // 设置光标位置兼容IE/FF
  NewKeyBoard.prototype.setCaretPosition = function(){
      var _this = this;
      if(_this._default.EVENT_NODE.setSelectionRange){
          setTimeout(function(){
              _this._default.EVENT_NODE.focus();
              _this._default.EVENT_NODE.setSelectionRange(_this._default.selectionStart, _this._default.selectionStart);
          }, 0);
      }else if(_this._default.EVENT_NODE.createTextRange){
          var rng = _this._default.EVENT_NODE.createTextRange();
          rng.move('character', _this._default.selectionStart);
          rng.select();
      }
  }

  // 隐藏键盘
  NewKeyBoard.prototype.hideKeyBoard = function(){
      var _this = this;
      // 取消监听
      $(document).off(softKeyBoard._default.eventType, 'body.libh_key_board_flag');
      var _parentNode = document.querySelector(softKeyBoard._default.BODY_NODE_ID);
      if(_parentNode && _parentNode.getAttribute("type") == '1' && _parentNode.getAttribute("display") == 'block') {
        _parentNode.setAttribute("display", "none");
        $(softKeyBoard._default.BODY_NODE_ID).removeClass('routine_up_fade').addClass('routine_down_fade');
        if(!softKeyBoard._default.isInput) {
          $(softKeyBoard._default.EVENT_NODE).removeClass("libh_input_cursor");
          if(!softKeyBoard._default.inputValue) {
            $(softKeyBoard._default.EVENT_NODE).removeClass("libh_change_key");
          }
        }
        if(typeof(softKeyBoard._default.clickCallBack) == "function") {
          softKeyBoard._default.clickCallBack('remove', softKeyBoard._default.inputValue, softKeyBoard._default.EVENT_NODE);
        }
      } else if(_parentNode && _parentNode.getAttribute("type") == '0' && _parentNode.getAttribute("display") == 'block') {
        _parentNode.setAttribute("display", "none");
        $(softKeyBoard._default.BODY_NODE_ID).removeClass('number_up_fade').addClass('number_down_fade');
        if(!softKeyBoard._default.isInput) {
          $(softKeyBoard._default.EVENT_NODE).removeClass("libh_input_cursor");
          if(!softKeyBoard._default.inputValue) {
            $(softKeyBoard._default.EVENT_NODE).removeClass("libh_change_key");
          }
        }
        if(typeof(softKeyBoard._default.clickCallBack) == "function") {
          softKeyBoard._default.clickCallBack('remove', softKeyBoard._default.inputValue, softKeyBoard._default.EVENT_NODE);
        }
      }
  }

  $('body').addClass("libh_key_board_flag"); // 添加标识，用于事件监听
  var options = params || {};
  var softKeyBoard = new NewKeyBoard();
  softKeyBoard.addEvent();
}
window.keyBoard = keyBoard;

• 样式

/* 键盘 */
#libh_key_board {
    background: #E6E6E6;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10000;
    overflow: hidden;
}
#libh_key_board table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}
#libh_key_board table td a {
    display: block;
    font-size: 24px;
    text-align: center;
    color: #666;
    background: #FFF;
    border: 1px solid #E6E6E6;
    text-decoration: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 50px;
    line-height: 50px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#libh_key_board table td svg {
    height: 42px;
    width: 42px;
    margin: 4px auto 0;
}
#libh_key_board table td .font_style {
    font-size: 20px;
    background: #E6E6E6;
}
#libh_key_board.number_up_fade {
    transform: translate(0, 0);
    animation: upFade .3s ease-in;
}
#libh_key_board.number_down_fade {
    transform: translate(0, 201px);
    animation: downFade .3s ease-in;
}

@keyframes upFade {
    0% {
        transform: translate(0, 201px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes downFade {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 201px);
    }
}

/****支付密码键盘******/
#libh_key_board.password_popup {
    position: static;
}
#libh_key_board.password_popup .libh_key_board_pop {
    background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
    left: 0;
  width: 100%;
    height: 100%;
  z-index: 9999;
  overflow: hidden;
}
#libh_key_board.password_popup .libh_cipher_box {
    background: #FFF;
  position: fixed;
  bottom: 201px;
  width: 100%;
    height: 142px;
  z-index: 10000;
  overflow: hidden;
}
#libh_key_board.password_popup .libh_cipher_box .back_btn{
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
    color: #666;
    font-size: 16px;
    position: relative;
}
#libh_key_board.password_popup .libh_cipher_box .back_btn .close_btn {
    width: 40px;
    height: 40px;
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACkSURBVEhLtVbbDYAgDGQkR+ID9ncDpUQSDFB6ejUh8eMeoddaQ0oplnOWcwTSI1qPZgzyknO+WCZNvGmKQXVjmCy1GCZbjS1AycfMNQM7M5iDEBDsqwAWogWjdr0m8Fu8Oc+EaOKKCWVmlpkwBnLIpi8L3WBSc16JXEN2bVNLK1ow00FDiAi2msEEhPNFXJt4+OO2W9eu20y9CWsfr0wkWNfflhvM4oyIxh/FYQAAAABJRU5ErkJggg==") no-repeat center;
    background-size: 12px;
    position:absolute;
    right:0;
    top:0;
    cursor: pointer;
}
#libh_key_board.password_popup .libh_cipher_box .libh_cipher_box_content {
    padding: 17px 20px 0 20px;
}
#libh_key_board.password_popup .libh_cipher_box .libh_cipher_box_content td a {
    height: 38px;
  line-height: 52px;
  border: 1px solid #E6E6E6;
    border-left: none;
    border-radius: 0;
    font-weight: bold;
}
#libh_key_board.password_popup .libh_cipher_box .libh_cipher_box_content td:first-child a {
    border-left: 1px solid #E6E6E6;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#libh_key_board.password_popup .libh_cipher_box .libh_cipher_box_content td:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
#libh_key_board.password_popup .password_table {
    background: #E6E6E6;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10000;
  overflow: hidden;
}
#libh_key_board.password_popup.password_up_fade {
    display: block;
    /* transform: translate(0, 0);
    animation: passwordUpFade .3s ease-in; */
}
#libh_key_board.password_popup.password_down_fade {
    /* transform: translate(0, 343px);
    animation: passwordDownFade .3s ease-in; */
    display: none;
}

@keyframes passwordUpFade {
    0% {
        transform: translate(0, 343px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes passwordDownFade {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 343px);
    }
}

#libh_key_board.routine_board {
  width: 100%;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 2px;
  padding-top: 0.3em;
  background-color: #e5e6e8;
  user-select: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  pointer-events: auto;
}
#libh_key_board.routine_board p {
    width: 99%;
    margin: 0 auto;
    /* height: 45px; */
    margin-bottom: 0.3em;
    display: flex;
    display: -webkit-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
#libh_key_board.routine_board p i {
      display: block;
      margin: 0 0.5%;
      height: 34px;
      line-height: 34px;
      font-style: normal;
      font-size: 16px;
      border-radius: 3px;
      width: 44px;
      background-color: #fff;
      text-align: center;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      -webkit-box-flex: 1;
}
#libh_key_board.routine_board p i:active {
        /* background-color: darken(#ccc, 10%); */
}
#libh_key_board.routine_board .tab-upper {
      width: 50px;
      margin: 0 1%;
      background: #cccdd0;
      color: #fff;
      font-size: 16px;
            width: 60px;
}
#libh_key_board.routine_board .key-delete {
      width: 50px;
      margin: 0 1%;
      color: #827f7f;
      background: #d7d7d8;
            font-size: 16px;
            width: 60px;
}
#libh_key_board.routine_board .symbol_del {
    color: #827f7f;
    background: #d7d7d8;
    font-size: 16px;
}
#libh_key_board.routine_board .tab-num {
      font-size: 16px;
      background: #dedede;
      color: #5a5959;
            width: 62px;
}
/* #libh_key_board.routine_board .tab-point {
      width: 20px;
} */
#libh_key_board.routine_board .tab-blank {
      width: 189px;
      font-size: 16px;
      padding: 0 15px;
      color: #5a5959;
}
/* #libh_key_board.routine_board .tab-symbol {
      width: 20px;
      font-size: 18px;
} */
#libh_key_board.routine_board .tab-enter {
      font-size: 16px;
            width: 99px;
            background: #FF7F24;
        color: #fff;
}
#libh_key_board.routine_board .board_bottom_content p:nth-child(2) {
      width: 88%;
}
#libh_key_board.routine_board .board_main_content .line_invagination {
    padding: 0 17px;
}
#libh_key_board.routine_board .board_main_content .line_invagination02 {
    padding: 0 34px;
}
#libh_key_board.routine_board .board_main_content .line_invagination02 i:first-child {
    width: 50px;
}
#libh_key_board.routine_board .board_main_content .line_invagination02 i:last-child {
    width: 50px;
}
#libh_key_board.routine_board .board_main_content .tab-upper svg {
    height: 21px;
    width: auto;
    margin: 8px auto 0;
}
#libh_key_board.routine_board .board_main_content .tab-lower svg {
    height: 21px;
    width: auto;
    margin: 8px auto 0;
}
#libh_key_board.routine_board .board_main_content .key-delete svg {
    height: 27px;
  width: auto;
  margin: 4px auto 0;
}
#libh_key_board.routine_board .board_main_content .symbol_del svg {
    height: 27px;
  width: auto;
  margin: 4px auto 0;
}

#libh_key_board.routine_board.routine_up_fade {
    /* display: block; */
    transform: translate(0, 0);
    animation: routineUpFade .3s ease-in;
}
#libh_key_board.routine_board.routine_down_fade {
    transform: translate(0, 199px);
    animation: routineDownFade .3s ease-in;
    /* display: none; */
}

@keyframes routineUpFade {
    0% {
        transform: translate(0, 199px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes routineDownFade {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 199px);
    }
}

.libh_input {
    color: #999 !important;
    position: relative;
}
.libh_input.libh_change_key {
    color: #666 !important;
}
.libh_input::before {
    content: attr(placeholder);
}
.libh_input.libh_change_key::before {
    content: attr(data-content);
}
.libh_input.libh_change_key.libh_input_cursor::after {
    content: '';
    border-left: 1.5px solid #666;
    height: 45%;
    opacity: 1;
    animation: fadeToggleInput 1s infinite;
}
@keyframes fadeToggleInput {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}