移动端禁止软键盘弹出

需求背景

实现一个在巴枪上运行的hybrid app。

巴枪不同于手机的是，它有实体物理按键，产品要求在初始化页面时，输入框自动focus，但不弹出软键盘；手动点击输入框时，才允许键盘弹出。

方案调研

起初想通过代码直接控制软键盘的开启关闭，但发现并没有这样的api，只能通过输入框的focus和blur，间接控制软件盘，这样就达不到需求目的。

最终实现

之后从朋友那得到方案，经测试可行，代码如下(项目为vue，其他框架原理可通用)

<input @focus="onFocus" />

onFocus(e) {
  this.$nextTick(() => {
    e.target.setAttribute('readonly', true);
    setTimeout(() => {
      e.target.removeAttribute('readonly');
    }, 0);
  });
}

原理

在输入框刚刚focus的那一刻，设置只读属性来阻止键盘。之后再删除只读属性，利用这个时间差来禁止键盘弹出。