zoukankan      html  css  js  c++  java
  • 移动端键盘遮挡问题

    输入框focus后,键盘弹起会遮挡住输入框,解决方法有如下几种:

    1.找到元素的顶部位置,页面滚动到元素顶部位置(有时页面高度不足,
    可能要添加padding-bottom,以保证页面滚动到指定元素后,用户
    能手动滑动到其他位置,可以使用click事件或focus和blur事件,
    来控制和解除行为)

    zepto

    this.$el.bind('click', function(evt) {
        var offset = that.$el.offset();
        var scrollValue = offset.top;
        window.scrollTo(0, scrollValue);
    });

    javascript

    var el = document.getElementById('xx')
    el.addEventListener('click',function(evt){
        var top = el.getBoundingClientRect().top;
        window.scrollTo(0,top);
        //或者设置scrollTop
        //window.scrollTop = top;
        //document.body.scrollTop = top;
    },false);

    2.可以使用scrollIntoView或scrollIntoViewIfNeeded(新版ios中已经失效)

    在input的focus或click时候,使用scrollIntoView将页面滚动至元素位置,或者 document.activeElement.scrollIntoViewIfNeeded();

    3.分页显示input

    将多个输入框分页显示在多屏,每屏只在上半屏显示输入框。

    4.弹框输入

    将被遮挡的input做成div,点击时候,弹出对话框进入输入。

    参考:https://my.oschina.net/cjlice/blog/625526

  • 相关阅读:
    枚举类型的应用
    动手动脑
    四则运算和验证码--源码
    ATM源码
    javabean+jsp+servlet+jdbc
    四则运算改良
    Java异常
    课后总结
    包装类Integre
    对象验证
  • 原文地址:https://www.cnblogs.com/mengff/p/6913493.html
Copyright © 2011-2022 走看看