移动端显示输入框框直接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>
参考链接
/p/23441663如果觉得《vue实现移动端自动弹起软键盘》对你有帮助，请点赞、收藏，并留下你的观点哦！
