移动端软盘遮盖输入框的解决方案

手机端在向页面输入内容时，我们希望点击输入框聚焦后页面能自动定位，将输入框移至可见区域内。

如上图所示，如果点击输入框，这时候手机会调起软盘，那么软盘会盖住输入框，这样用户体验不好。
避坑指南

当点击输入框时调起软盘，安卓和IOS会有所不同，IOS中弹起软盘会让整体布局往上移，而安卓不会而是整体布局高度缩减了。如果要监听键盘弹起或者收起，IOS会失效。

const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', () => {const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight >= originalHeight) {//键盘收起}else {//键盘弹起}
});

使用scrollIntoView方法时需要注意，当软盘弹起页面底部的高度如果过小scrollIntoView方法滚动页面距离有限可能还是无法移至可视区，因此需要在输入框focus后在底部增加一段高度，然后让某个元素scrollIntoView到顶部，注意此时需要使用setTimeout延迟一段时间再scrollIntoView，因为需要等底部高度设置完毕。

 <textareaclassName={classNames('textarea-card-area', className)}placeholder={placeholder}value={value}onFocus={e => {onFocusChange?.(true, e.target);setTimeout(() => {if (e.target) {e.target.scrollIntoView();}}, 200);}}onBlur={() => {onFocusChange?.(false);}}/>

如果你的页面顶部有吸顶的header，这个header会挡住你的输入框，当focus后，元素执行了scrollIntoView()，页面滑动到顶部，输入框会被header挡住。
可以使用一个div放在textarea或者input之前。

 <div className={classNames('textarea-card')}>{/* 该 div 的作用是保证键盘弹起 textarea 居中 */}<div className="place-flag" ref={placeFlagRef}></div><textareaclassName={classNames('textarea-card-area', className)}placeholder={placeholder}value={value}onFocus={e => {onFocusChange?.(true, e.target);setTimeout(() => {if (placeFlagRef.current) {placeFlagRef.current.scrollIntoView();}}, 200);}}onBlur={() => {onFocusChange?.(false);}}onChange={e => {// onchange事件}}maxLength={maxlength}/>// 其他代码
</div>

此时让上面的divscrollIntoView到顶部，这个div通过position：absolute 设置-50px，这个距离可以设置为header的高度，那么刚好就让输入框移至到可视区，并且没有被header挡住。

移动端软盘遮盖输入框的解决方案相关推荐

手机网页，输入时软键盘盖住输入框完整解决方案，兼容安卓、鸿蒙、苹果IOS
手机网页,输入时软键盘盖住输入框完整解决方案,兼容安卓.鸿蒙.苹果IOS 当点击输入框时调起软盘,安卓和IOS会有所不同,IOS中弹起软盘会让整体布局往上移,而安卓不会而是整体布局高度缩减了. 参考 ...
移动端，input输入框被手机输入法解决方案
移动端,input输入框被手机输入法解决方案参考文章: (1)移动端,input输入框被手机输入法解决方案 (2)https://www.cnblogs.com/liuhappy/p/8809149 ...
移动端滚动穿透问题完美解决方案
移动端滚动穿透问题完美解决方案参考文章: (1)移动端滚动穿透问题完美解决方案 (2)https://www.cnblogs.com/yaiza/p/11384130.html 备忘一下.
iOS 键盘遮挡输入框万能解决方案（多个输入框）
效果图如下: 思路分析: 代码: 知识点: 问题: 效果图如下: 思路分析: 当我们有很多输入框时,有时候键盘弹出来会遮挡着输入框.我们需要获取输入框和键盘相对于最外层视图的位置来判断是否遮挡,如果遮 ...
微信团队分享：微信移动端的全文检索多音字问题解决方案
本文来自微信开发团队WeMobileDev公众号的技术分享. 1.前言微信的移动客户端全文搜索中的多音字问题一直是搜索体验的痛点之一.微信客户端全文搜索在上线以后,也经常收到用户关于多音字问题的反馈 ...
移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
移动端页面滚动穿透问题解决方案
移动端页面滚动穿透问题解决方案参考文章: (1)移动端页面滚动穿透问题解决方案 (2)https://www.cnblogs.com/GeniusLyzh/p/5808446.html 备忘一下.
物联网端-云一体化应用管理解决方案
近年来,随着云计算的发展,"云边端一体化"."云端协同"等词也频繁出现在大众眼. 什么是"端-云一体化"? 这里我们拆开来解释: 云:云计算 ...
移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...

移动端软盘遮盖输入框的解决方案

移动端软盘遮盖输入框的解决方案相关推荐

最新文章

热门文章