js模拟键盘，在iphone下点击时，响应速度慢,或没有响应

Question

问题描述：

是这样的，因为业务需要，我用程序自己写了个虚拟键盘，在安卓下工作正常，但是在iphone环境下，点击数字键时，响应速度很慢，或都有时没有响应，输入过快，就会漏掉输入。

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>

效果是这样的：

有人遇到过类似问题吗？帮解决一下,谢谢

有兴趣的可以上这个网址试一下，用iphone6 或 6s 测试地址

Answer 1

你确定不是300毫秒延迟的问题?建议你搜一下看看是否是这里的问题.

Answer 2

我测试没有你所描述的问题啊

Answer 3

谢...谢邀。
没有接触过类似的项目。
猜想可能是ios的坑，之前遇到过一个fix定位和一个z-index的坑。

说一下我的想法，

1. 第一个比较‘蠢’，打印日志，看看是什么原因导致的延迟，主要是打印每一次click的时间。
2. 第二个就是去搜索以下ios上点击事件相关的坑，可能有现成的解决方法。
3. 第三个就是直接用别人的轮子，不过不排除有一些依旧有这个问题。

Answer 4

我也遇到过这个问题，使用@touchstart绑定点击事件就可以了