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();
            });

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

  • 相关阅读:
    如何在java类中读取Properties配置文件
    常用网址 转
    我的读书计划
    制作一个半透明遮罩层的库——TipView
    RxJava 中的 subscribeOn 和 observeOn 的区别
    一个操作SQLite数据库的例子
    Java ThreadLocal
    3. 请求与响应
    Java的Volatile关键字
    排序
  • 原文地址:https://www.cnblogs.com/myzy/p/8883077.html
Copyright © 2011-2022 走看看