zoukankan      html  css  js  c++  java
  • iphone11系统输入框的光标位置不正常

    本人的系统是11.3的是正常的,却发现测试机的11.1和11.2的光标位置在输入框的下边。百度一下,很多人有同样的问题,在此记录一下

    解决办法一: 

    //弹框弹出后执行如下代码
      $('body').css({'position': 'fixed', 'width': '100%'});
    //弹框关闭后执行如下代码
      $('body').css({'position': 'relative'});

    但是我发现这样的写法,每次点输入框时需要点击两点才能显示光标

    解决办法二:

     后来又找到 了另一种 办法 

        userName.on('focus',function(){
                mask.attr('style','display:flex;position:absolute;');
                $('html').addClass('noscroll');
            })
            userPhone.on('focus',function(){
                $('html').addClass('noscroll');
                mask.attr('style','display:flex;position:absolute;')
            });
            userPhone.on('blur',function(){
                mask.attr('style','display:flex;position:fixed;')
                $('html').removeClass('noscroll');
            })
            userName.on('blur',function(){
                mask.attr('style','display:flex;position:fixed;')
                $('html').removeClass('noscroll');
            })
        }

    在input的focus和blur设置postion;因为出现光标位置不正常是因为iphOne不能很好的解析position是fixed

    对应的css

    .noscroll,
    .noscroll body {
        overflow: hidden;
    }
    .noscroll body {
        position: relative;
    }

    在此基础上优化

        $('.mask').on('touchmove', function(event) {
                event.preventDefault();
            });

    这样下面的内容就不会滚动 了

  • 相关阅读:
    硅谷独角兽公司的监控系统长啥样?
    通过jQuery设置全局Ajax加载时呈现Loading
    Jquery遮罩插件,想罩哪就罩哪!
    jquery 读取textarea内容
    easy ui layout 高度 宽度自适应浏览器
    css调节样式
    ORACLE数据库的连接
    spring cloud API网关
    嵌套查询与连接查询的性能
    对于where 1=1 这种条件传入需要'%s'
  • 原文地址:https://www.cnblogs.com/myzy/p/8883077.html
Copyright © 2011-2022 走看看