移动端拉起键盘后遮挡问题

一，问题

移动端，点击input时，部分安卓手机拉起键盘后，会遮挡住input。

二，解决

// 初始化完成后，需要监听键盘的调起 function keyWorld() { 
    window.addEventListener('resize', () => { 
    onFocusAddr(); }); } // 判断是否是安卓还是ios function isAndroid() { 
    let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // android终端或者uc浏览器 return isAndroid === true; } // 安卓键盘遮挡输入 function onFocusAddr() { 
    if (!isAndroid()) return; // 判断是否是安卓机 nextTick(() => { 
    let inputDom = myInputRef.value.$el ? myInputRef.value.$el : myInputRef.value; // 获取根节点 let boxScrollTop = document.body.scrollTop || document.documentElement.scrollTop; let inputRectObject = inputDom.getBoundingClientRect(); let btnRectObject = myBtnRef.value.getBoundingClientRect(); let distanse = inputRectObject.top + inputDom.offsetHeight - btnRectObject.top; if (distanse >= 0 && distanse < 120) { 
    console.log( '两者距离视窗顶部距离之差，大于零则被遮盖，需要上滑', distanse * 2 ); window.scrollTo({ 
    top: boxScrollTop + distanse * 2, behavior: 'smooth' }); } }); // 键盘拉起的延迟时间 } 

即在键盘拉起之后，判断input会不会被遮挡，遮挡了就控制滚动条滑动到不遮挡的位置。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/10999.html