移动端软键盘监听和兼容性写法(h5)

移动端的软键盘可分两类,一类(下文以X代替)是会把底部固定的元素(position:fixed元素)上弹的,还有一类(下文以Y代替)是不会上弹的。这两类必须分开处理。

h5是没有专门的软键盘事件的,只能自己模拟!

监听X的软键盘事件,可以使用 window.onresize来监听     onresize 事件会在窗口或框架被调整大小时发生

X底部固定的元素上弹是因为窗口变小了。  window.onresize就可以监听到.

那么Y,我们在使用软键盘大部分是在使用input的时候调用的,这个时候我们之所以要考虑软键盘是因为软键盘遮住了input框,所以这个时候我们一定要把滚动条滚动到该元素的位置,可以添加onfocus事件,滚动到该元素位置。

tip:Y这种情况  可能用户输完之后还没有失去焦点,再次点击就没有滚动效果了,所以一定要加一个onclick事件.

猜你喜欢

转载自blog.csdn.net/zero_person_xianzi/article/details/81808295