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

  • 相关阅读:
    hdu 1269 迷宫城堡(强联通分量,基础)
    hdu 2102 A计划(BFS,基础)
    python 变量命名规范
    rpm常用选项
    memcached
    session共享
    Nginx高级使用
    nginx 反向代理
    Nginx基本使用
    github 建立博客
  • 原文地址:https://www.cnblogs.com/mengff/p/6913493.html
Copyright © 2011-2022 走看看