移动端显示输入框框直接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实现移动端自动弹起软键盘相关推荐

移动端h5唤起键盘_移动端H5界面打开后，如何自动调用软键盘
test(){ // let aa = this.$refs.input1.blur(); // this.$nextTick((x)=>{ //正确写法 // // this.$refs.in ...
H5 (React) 移动端监听软键盘弹起、收起
前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听. ...
安卓输入法弹出后css横屏,mui开发安卓端，输入法软键盘导致css横屏样式判断触发...
mui开发安卓端,输入法软键盘导致css横屏样式判断触发 mui开发安卓端,输入法软键盘导致css横屏样式判断触发 css 横屏媒体查询 @media screen and (orientation: ...
iOS自动自动隐藏软键盘
自动隐藏软键盘,分为两步,一个是单击软键盘外部任意空间:另外一个是单击软键盘上的return键.下面依次实现单击软键盘外部空间键隐藏软键盘: 一:在viewDidLoad中添加一个UITabGest ...
ios 弹起软键盘position: fixed；失效
<view class="stores-top"> <input type="text" placeholde ...
按回车Enter键后自动隐藏软键盘、进页面自动弹出软键盘
在布局文件中EditText控件中加入属性: android:imeOptions="actionDone" imeOptions还有很多其他参数,比如搜索,前往. ...
移动端背景图软键盘的兼容
本文主要介绍移动端背景图软键盘的界面兼容行问题解决. 1.问题描述,当前端小工程师写背景图的情况下,经常会遇到在谷歌浏览器的调试模式下一切都很ok,结果在真机测试却样式堪忧.比如,背景图被软键盘撑开, ...
h5 移动端监听软键盘弹起、收起
前面一篇博客 h5 安卓键盘弹起界面适配修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
h5(移动端) 监听软键盘弹起、收起
https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/articl ...

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

解决思路

vue实现

参考链接

vue实现移动端自动弹起软键盘相关推荐

最新文章

热门文章