移动端键盘和光标的兼容那点事

2024年5月25日 90次阅读 来源: 瘦子江

作者：@micky思 @wupq @yewq

在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增

ios移动端输入框上浮导致输入位置偏移

问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下视口计算有问题，页面的fixed会失效，变成absolute，结果就是当屏幕数据超过一屏时，滑动页面，input框也会跟着一起滚动导致光标不跟随密码弹出框移动。
解决方法：如果使用页面数据不超过一屏（禁止滚动），那么即使变成了absolute页面也不会有什么变化。

//在弹窗出现的事件里加入
$('.wrap').css('height','100%');//wrap为包含除弹窗外的所有页面元素的父div
//关闭弹窗时div恢复原来高度
$('body').on('click','.pop_close',function(){
    $('.wrap').css('height','24.69rem');
});
//ps：如果整体背景图是在父元素wrap里，background-size：cover

微信输入法键盘弹起H5页面无法还原

//判断ios系统
var u=navigator.userAgent;
if(u.indexOf('iPhone')>-1){
    var flag;
    $('body').on('focus','input',function(){
        flag=false;
    });
    $('body').on('blur','input',function(){
        flag=true;
        setTimeout(function(){
            if(flag==false){
                return false;
            }else{
                document.body.scrollTop=document.body.scrollTop;
            }
            //防止在多个input间切换时做过多操作
        },0);
        //解决select导致的键盘弹起 
        $('.select').on('click',function(){
            document.body.scrollTop = document.body.scrollTop;
        });
    });
}

readonly时，IOS会出现光标和输入提示

<input type="text" class="" value="" readonly unselectable="on" onfocus="this.blur()">
    原文作者：瘦子江
    原文地址: https://segmentfault.com/a/1190000019768214
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞