摘要:如果是安卓手机则执行这个功能当点击框之后,视口高度发生变化,则软键盘弹出了,这时,调用函数,让顶上去。
在移动端的web开发中,大家会发现,当给一个元素设置overflow:sroll;属性时,在ios端滑动页面,页面滚动的反应很慢,有种卡顿的感觉,但是在安卓端滚动很快,于是这时就有人想到用iscroll.js插件,让页面中有overflow:scroll;属性的元素在ios端和安卓端滚动的都很流畅,是的,这可以解决问题,元素滚动也很流畅,但是,iscroll.js的也经常伴随着很多问题。例如,他会屏蔽页面上的很多点击事件和input框输入问题等等。当然这些都可以解决,但是弊端很多。于是乎,就有了-webkit-overflow-scrolling:touch;属性,来解决ios端带有overflow:sroll;属性的元素,让其滚动很流畅。记住,-webkit-overflow-scrolling: touch;属性要写在有overflow:sroll;属性的元素的样式里。
有时页面里的一个div给他写了固定的高度,也写了overflow:scroll;属性,并且这个div里有很多input输入框,当我点击某一个input时,软键盘弹出,input输入框在安卓端不会自动顶上去,这时测试就会给你提bug了,这就很麻烦了。于是乎,我就写了一个自己的方法,让安卓端的input框自动顶上去,因为在安卓有这个情况,所以做了终端判断,以下代码仅供参考:
Document
截图:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82143.html
摘要:如果是安卓手机则执行这个功能当点击框之后,视口高度发生变化,则软键盘弹出了,这时,调用函数,让顶上去。 在移动端的web开发中,大家会发现,当给一个元素设置overflow:sroll;属性时,在ios端滑动页面,页面滚动的反应很慢,有种卡顿的感觉,但是在安卓端滚动很快,于是这时就有人想到用iscroll.js插件,让页面中有overflow:scroll;属性的元素在ios端和安卓端...
摘要:然而,并没有直接监听软键盘的原生事件,只能通过软键盘弹起或收起,引发页面其他方面的表现间接监听,曲线救国。软键盘收起表现触发输入框以外的区域时,输入框失去焦点,软键盘收起。可以让软键盘弹起后,让焦点元素再次滚到可视区,强迫滚到位。 前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从...
摘要:参考地址首先,是这样的布局父容器里面放一个输入框和一个按钮思路是父容器定位,为,为布局在其他事件触发输入框出现的时候例如一个评论的,父容器值变为,被软键盘顶上来。 参考地址: https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先,是这样的布局:父容器里面放一个输入框 和一个按钮 思路是:父容器fi...
阅读 1682·2021-11-25 09:43
阅读 2635·2019-08-30 15:53
阅读 1781·2019-08-30 15:52
阅读 2880·2019-08-29 13:56
阅读 3294·2019-08-26 12:12
阅读 551·2019-08-23 17:58
阅读 2098·2019-08-23 16:59
阅读 905·2019-08-23 16:21