700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来

解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来

时间:2023-10-17 18:32:03

相关推荐

解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来

好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴。在安卓机子上则没有这样的情况。

解决方法是通过h5的scrollIntoView去实现。scrollIntoView()可以在所有的HTML元素上调用,在滚动浏览器窗口,或者窗口发生变化时,可以调用该方法让元素出现在视窗中。(本文的例子就是软键盘的弹出改变了窗口的高度)

该方法不传参数或者传入true可以让元素与视窗顶部齐平,如果传入false调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视口顶部平齐。)

具体代码如下,用一个全局的定时器变量改变input框的状态,在input框点击或聚焦时触发该定时器,失焦则清除定时器(这里用vue事件作为例子)

template模板

<input @click="viewAll" @blur="viewDefault" ref="replyInput" type="text" />

javascript模块

var inputTimer = null;viewAll: function(){this.inputTimer = setInterval( () => {this.$refs.replyInput.scrollIntoView(false);},100);},viewDefault: function(){clearInterval(this.inputTimer);}

这个问题解决完呢,通常输入框弹起的时候我们会给背景加个遮罩层,同时也不想背景滑动,这时候单单给body添加overflow hidden是不够的,主要是ios的机子上无法兼容,so这时候最好还是给蒙板跟你的输入框区域加上个touchmove事件,来去掉touchmove的默认事件。如

template模板 遮罩层

<div @touchmove="stopMove($event)" class="view-mask"> </div>

javascript模块

stopMove: function(e){e.preventDefault();}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。