移动端显示输入框框直接focus不会弹出软键盘

解决思路

我们让点击的时候可以通过点击label关联input，这个input(input1)不要通过display：none， 隐藏，我们要通过

display: block;
position: absolute;
z-index: -1;
left: -1000px;
top: 0px;

隐藏，这样其实我们点的时候就是点击输入框，然后键盘弹起，然后我们在focus到我们目标输入框，输入框2 input2

vue实现

vue的foucs要用过自定义指令的方式实现

v-focus=""

focus: {
      inserted: function(el, binding) {
          if (binding.value) {
              console.log(binding.value)
              el.focus();
              el.scrollIntoView();
          }
          else {
              el.blur();
          }
      },
      componentUpdated: function(el, binding) {
          if (binding.value) {
              console.log(binding.value)
              el.focus();
              el.scrollIntoView();
          }
          else {
              el.blur();
          }
      }
}

然后点击的时候让input框显示，然后focus就行了，这个在安卓上没有问题，但是在ios上你foucs第二个input框时，他键盘又收回去了，要用touchstart 去监听。并且要

e.preventDefault();
e.stopPropagation();

但是touchstart不能在安卓上用，直接显示在消失，安卓上要用click事件。所以在模版里面做一个判断是否是ios就行了

<label v-if="isIos" for="input-name" @touchstart="xxx($event)">
</label>
<label v-else for="input-name" @click="xxx($event)">
</label>

参考链接

• https://zhuanlan.zhihu.com/p/23441663