問(wèn)題描述：

是這樣的，因?yàn)闃I(yè)務(wù)需要，我用程序自己寫(xiě)了個(gè)虛擬鍵盤(pán)，在安卓下工作正常，但是在iphone環(huán)境下，點(diǎn)擊數(shù)字鍵時(shí)，響應(yīng)速度很慢，或都有時(shí)沒(méi)有響應(yīng)，輸入過(guò)快，就會(huì)漏掉輸入。

1. 框架用的vuejs 1.0;
2. touch事件用的是基于hammerjs的vue-touch;

代碼如下：

<template>
  <div class="n-keyboard"
       v-show="isOpen"
       transition="modal-slide-up">
    <div class="n-keyboard__body" virtual-keyboard="">
      <button class="n-keyboard__key"
              :class="{fn:!key.isNumber,active:key.active}"
              v-for="key in keys"
              track-by="value"
              virtual-keyboard=""
              :key="key.value"
              v-touch:tap="onkeytap(key,$event)">
     
        <span class="iconfont"
              virtual-keyboard=""
              :class="'icon-'+key.icon"
              v-if="!key.isNumber"></span>
              {{key.name}}
      </button>
    </div>
  </div>
</template>
<script>

class Key {
  constructor(name, value, icon = '') {
    this.name = name;
    this.value = value;
    this.icon = icon;
    this.isNumber = true;
    this.eventName = 'input';
    this.active=false;
  }
}

const keys = [];
import { isNumber } from 'lodash';
const backspace = new Key('退格', 'backspace', 'iconfonttuige2');
const clear = new Key('清除', 'clear', 'qingchu');
const zero = new Key(0, 0);

const spacialKeys = [backspace, clear, zero];

backspace.isNumber = false;
backspace.eventName = 'backspace';

clear.isNumber = false;
clear.eventName = 'clear';

for (let i = 1; i < 10; i++) {
  keys.push(new Key(i, i));
  if (i % 3 === 0) {
    keys.push(spacialKeys.shift());
  }
}
export default {
  name: 'n-keyboard',
  data() {
    return {
      keys
    };
  },
  props: {
    isOpen: {
      type: Boolean,
      default: false,
      twoWay: true
    }
  },
  methods: {
    onkeytap(key) {
      let { eventName, value }=key;
      this.$emit('on-' + eventName, value);
      key.active=true;
      setTimeout(()=>key.active=false,34);
    }
  }
};
</script>

<style lang="scss">
$keyboard-header-height: 30px;
$keyboard-divider-color: #ff6f85;
$keyboard-divider-size: 1px;
$keyboard-bg: #e23e56;
$keyboard-key-width: 25%;
$keyboard-key-height: 50px;
$keyboard-key-font-size: 28px;
$keyboard-key-color: #fff;

.n-keyboard {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: $keyboard-bg;
  z-index: 9999;
  .n-keyboard__header {
    height: 30px;
  }

  .n-keyboard__body {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .n-keyboard__key {
    width: $keyboard-key-width;
    height: $keyboard-key-height;
    // border-width:0;
    -webkit-appearance: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 0;
    border-bottom-width: 0;
    border-style: solid;
    border-color: $keyboard-divider-color;
    font-size: $keyboard-key-font-size;
    text-align: center;
    line-height: $keyboard-key-height;
    color: $keyboard-key-color;
    flex: none;
    outline:none;
    background-color: transparent;
    // transition:all 0.3s;
    &:nth-child(4n){
      border-right-width:0;
    }
    &.fn {
      font-size: 15px;
    }
    .iconfont{
      margin-right:5px;
      font-size:18px;
    }
    &.active{
      background-color: darken($color: $keyboard-bg, $amount: 20%);
    }
  }
}
</style>

效果是這樣的：

有人遇到過(guò)類(lèi)似問(wèn)題嗎？幫解決一下,謝謝

有興趣的可以上這個(gè)網(wǎng)址試一下，用iphone6 或 6s 測(cè)試地址