vue实现移动端自动弹起软键盘

本文主要是介绍vue实现移动端自动弹起软键盘，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

移动端显示输入框框直接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

这篇关于vue实现移动端自动弹起软键盘的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---