转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html

1  
用定位为题来解决
var oHeight = $(document).height(); //浏览器当前的高度
   
   $(window).resize(function(){

if($(document).height() < oHeight){
         
        $("#footer").css("position","static");
    }else{
         
        $("#footer").css("position","absolute");
    }
        
   });

2 第二种方法是改变可是区域的高度
var loaclHeight = $("section").height();//获取可视宽度
$("input,textarea").focus(function() {
var keyboardHeight = localHeight - $("section").height();//获取键盘的高度
var keyboardY = localHeight - keyboardHeight;
var addBottom = (parseInt($(this).position().top) + parseInt($(this).height()));//文本域的底部
var offset = addBottom - keyboardY;//计算上滑的距离
$("section").scrollTop(offset);
});

项目中,我用的是第二种(苹果手机的话,自己就会调节,不设置也可以,安卓手机不行)

手机端上点击input框软键盘出现时把input框不被覆盖,显示在屏幕中间(转)的更多相关文章

  1. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  2. IOS下 input 被软键盘方案遮盖问题解决

    前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...

  3. android 弹出的软键盘遮挡住EditText文本框的解决方案

    1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...

  4. 页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景

    微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...

  5. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  6. 如何保持iOS上键盘出现时输入框不被覆盖

    在 iOS5 上请求显示键盘时,系统从屏幕底部将键盘滑入上来,位于应用的内容之上. (墙内:http://mikixiyou.iteye.com/blog/1488302) 如果屏幕中的内容项目比较多 ...

  7. mui搜索框在ios平台上点击多次才弹出键盘的解决方法

    今天使用Hbuilder调试手机端时,发现搜索框在安卓系统下,点击一次就可以弹出键盘 但是在iso下非常的不规律,要点击多次 代码实现如下: <div class="mui-input ...

  8. 关于h5手机端上拉加载和下拉刷新效果-1

    1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitb ...

  9. ios safari input fixed 软键盘里的爱恨情仇

    请看第一题: 为什么我的input获取焦点后,被输入法遮住了. 解决办法: 源码: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. Mac pro 装双系统 参考

    15岁觉得游泳难,放弃游泳,到18岁遇到一个你喜欢的人约你去游泳,你只好说“我不会耶”.18岁觉得英文难,放弃英文,28岁出现一个很棒但要会英文的工作,你只好说“我不会耶”.人生前期越嫌麻烦,越懒得学 ...

  2. 【python小练】0000

    第 0000 题:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 from PIL import Image, ImageDraw, Im ...

  3. tensorflow的特征工程函数

    1. # creates a real valued column for dense numeric data tf.contrib.layers.real_valued_column(    co ...

  4. HeapByteBuffer与DirectByteBuffer

    HeapByteBuffer,顾名思义,是写在jvm堆上面的一个buffer,底层的本质是一个数组,用类封装维护了很多的索引(limit/position/capacity等) DirectByteB ...

  5. Print Article(斜率DP入门+单调队列)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3507 题目大意:给你n个数,然后问你怎么分割当前的这n个数位那几组,使得每一组的权值加起来最大.每一组 ...

  6. linux+php实现定时任务[链接]

    1.crontab 详细用法 定时任务 https://www.cnblogs.com/aminxu/p/5993769.html 2.查看crontab日志 https://www.cnblogs. ...

  7. Elasticsearch 5.4.3实战--Java API调用:搜索建议

    通常的搜索引擎,都会根据用户的输入,实时给予匹配的提示. 那么这个功能在elasticsearch中如何实现呢? Elasticsearch里设计了4种类别的Suggester,分别是: Term S ...

  8. C++ Template 编程,泛型编程练习

    #include <iostream> #include <string> #include <deque> #include <stdexcept> ...

  9. 在VC中改变TAB顺序的方法

    用VC来写MFC程序的时候,多数情况下,会发现TAB顺序和预期的顺序不一致,那么这时就有必要重新调整TAB顺序, 来适应我们所写的程序. 调整TAB顺序的方法有两种: 1.在当前的界面或对话框下按“C ...

  10. VC使一个对话框不显示

    //add  this void CbkDlg::OnNcPaint() {     ShowWindow(SW_HIDE);     CDialog::OnNcPaint(); }     初始化时 ...