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

XboxYan 发布于2019-08-02 15:32 / 2871人阅读

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。

作者：@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会出现光标和输入提示

GPU云服务器云服务器兼容支持webrtc的移动端 webrtc移动端兼容性光标移动移动端对webRTC的支持情况

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54198.html

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

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。作者：@micky思 @wupq @yewq 在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增 ios移动端输入框上浮导致输入位置偏移问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下...

Kerr1Gan 2019-08-23 18:41 评论0 收藏0
移动端键盘和光标的兼容那点事

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。作者：@micky思 @wupq @yewq 在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增 ios移动端输入框上浮导致输入位置偏移问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下...

Jackwoo 2019-08-30 11:24 评论0 收藏0
pjax不再神秘，hash、state那点事

摘要：初步理解如果最近打电话给武汉的小伙伴，他说信号不好，那么相信我，他肯定不是真的信号不好，也不是不想和你说话，而是他可能在冰箱里。。。初步理解如果最近打电话给武汉的小伙伴，他说信号不好，那么相信我，他肯定不是真的信号不好，也不是不想和你说话，而是他可能在冰箱里。。。武汉的天气从来都是喜怒无常的，是吧，屌丝气十足，今年也是丝毫看不出有任何逆袭的迹象和可能性，当然咱也没必要去操那个心；好...

solocoder 2019-08-20 10:17 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0