移动端h5实现假键盘，假输入框，假input框

为什么要做这个呢，微信端ios选择type=tel 没有小数点，选择type=number有一大堆的非数字字符，当然你可以用keycode来判断去禁用非数字的点击，何况，这种类型的input框 会将 

只要输入框内的字符串不能转换成浮点数，它的值就变为空了

so当然就不考虑了，那网上搜了一下，发现还可以啊，简单写一个， 实现功能：

 

• 键盘带有小数点，并可以自动弹出
•  限制整数与小数的位数，超过就不能输入
• 无法连续输入不正常的数字
• 如果第一次输入'.' ，自动变为 '0.'
• 输入例如 100 或者 100. 或者 100.0  自动 变为 100.00

因为项目上用的是vux，so将别人的源代码改了一改来适应自己的项目，效果：

代码分为 keyboard.vue     键盘

<style scoped lang="less">
  .keyboard {
    height: 200px;
    width: 100%;
    background: white;
    z-index: 999;
    .list {
      height: 200px;
      .key:active {
        background: #e2e2e2;
      }
      .key {
        width: 100%;
        box-sizing: border-box;
        border-right: .5px solid #d6d6d6;
        border-top: .5px solid #d6d6d6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
      }
      .key:nth-child(3n) {
        border-right: none;
      }
    }
    .key {
      line-height: 49px!important;
    }
  }
  .del {
    font-size: 28px;
  }
  .animated {
    animation-duration: .2s;
    animation-fill-mode: both;
  }
  @keyframes slideInDown {
    from {
      transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    to {
      transform: translate3d(0, 100%, 0);
      display: none;
    }
  }
  @keyframes slideInUp {
    from {
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
  .slide-enter-active {
    animation-name: slideInUp;
  }
  .slide-leave-active {
    animation-name: slideInDown;
  }
</style>
<template>
  <transition name="slide">
    <div class="keyboard animated" v-show="show" @touchstart.stop.prevent="fn">
      <!-- 键盘区域 -->
      <div class="list">
        <flexbox orient="vertical" :gutter="0">
          <flexbox-item>
            <flexbox :gutter="0">
              <flexbox-item>
                <div class="key" @touchstart="typing('1')">1</div>
              </flexbox-item>
              <flexbox-item>
                <div class="key" @touchstart="typing