笔记本键盘乱按不受控制（IOS遇到的几个H5坑、h5键盘弹起遮挡输入框的处理）

一、iOS端遇到的H5常见问题及解决方案

问题一：ios端兼容input光标高度问题

问题描述：在安卓手机上，input输入框光标显示正常，但在苹果手机上点击输入时，光标的高度和父盒子的高度一致。原因分析：通常我们设置height属性来设置行的高度，line-height属性来设置行间的距离。当点击输入时，光标的高度会自动和父盒子的高度一样。解决方案：使用padding撑开输入框内容和高度height与行高line-height的间距。

问题二：ios端页面滑动卡顿问题

问题描述：在ios端上下滑动页面时，如果页面高度超过一屏，会出现明显的卡顿现象，部分页面内容显示不全。原因分析：微信浏览器自带WebKit内核，而iOS使用自带的Safari内核，Safari对于overflow-scrolling的处理方式不同。解决方案：在公共样式中加入特定的CSS代码来解决这个问题。同时要注意，-webkit-overflow-scrolling属性可能会引发一些bug，使用时需谨慎。

问题三：ios键盘唤起后页面不归位问题

问题描述：输入内容后软键盘弹出，页面内容整体上移，但键盘收起后页面内容不下滑。原因分析：固定定位的元素在软键盘弹出和收起时会出现占位问题。解决方案：使用特定的JS代码来处理这种情况，针对iOS系统的特性进行调整。同时要注意position: fixed的元素在iOS里可能会有被顶上去的问题，特别是使用第三方键盘时。

问题四：安卓弹出的键盘遮盖文本框问题

问题描述：在安卓微信H5中，弹出软键盘后会挡住input输入框。解决方案：给input和textarea标签添加focus事件，判断是安卓手机操作后，使用特定的JS代码来处理键盘遮挡问题。

二、解决h5键盘弹起遮挡输入框问题的方案