手机端上点击input框软键盘出现时把input框不被覆盖,显示在屏幕中间(转)
转载地址: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框不被覆盖,显示在屏幕中间(转)的更多相关文章
- jQuery手机端上拉刷新下拉加载更多页面
基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- IOS下 input 被软键盘方案遮盖问题解决
前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...
- android 弹出的软键盘遮挡住EditText文本框的解决方案
1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...
- 页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景
微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
- 如何保持iOS上键盘出现时输入框不被覆盖
在 iOS5 上请求显示键盘时,系统从屏幕底部将键盘滑入上来,位于应用的内容之上. (墙内:http://mikixiyou.iteye.com/blog/1488302) 如果屏幕中的内容项目比较多 ...
- mui搜索框在ios平台上点击多次才弹出键盘的解决方法
今天使用Hbuilder调试手机端时,发现搜索框在安卓系统下,点击一次就可以弹出键盘 但是在iso下非常的不规律,要点击多次 代码实现如下: <div class="mui-input ...
- 关于h5手机端上拉加载和下拉刷新效果-1
1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitb ...
- ios safari input fixed 软键盘里的爱恨情仇
请看第一题: 为什么我的input获取焦点后,被输入法遮住了. 解决办法: 源码: <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 【python小练】0013
第 0013 题: 用 Python 写一个爬图片的程序,爬 这个链接里的日本妹子图片 :-) 科科...妹子就算了,大晚上的爬点吃的吧.食物图集:抿一口,舔一舔,扭一扭~·SCD 写个简单的爬图爬虫 ...
- window编译caffe总结
最后发现用cmake_gui.exe安装最方便,加一个cudnn路径就行了,然后勾选选项就可以自动完成编译,很是方便 下面这个是命令行安装方法 1.参照官方命令行安装的方法 https://githu ...
- [C++]PAT乙级1002.写出这个数(20/20)
/* 1002. 写出这个数 (20) 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10^100. ...
- python之MD5加密
一. MD5加密import hashlib #Python3里的引用#import md5 #Python2里的引用 1. md5是不可逆的,不能解密2. 所有语言生成的md5串都是一样的 3. 不 ...
- MySQL去重案列(待更新...)
谈谈distinct 查询单个字段,没问题! SELECT DISTINCT username FROM t_user 但是我想加入id字段,这样写,报错! SELECT id, DISTINCT u ...
- Fragment处理接口回调,网络请求数据
03-06 19:57:46.138 8691-8691/com.retech.myapplication E/glz: onAttach03-06 19:57:46.138 8691-8691/co ...
- zabbix系列 ~ 自动监控多实例功能
一 场景 监控mongo的多实例端口二 目标 定制一套模板,根据不同的端口进行批量监控项的生成三 步骤 1 编写py脚本实现端口josin化输出,以便zabbix_server能进行识别 ...
- VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAGE RECOGNTION(翻译)
0 - ABSTRACT 在这个工作中,我们研究了卷积网络的深度对于它在大规模图像识别设置上的准确率的效果.我们的主要贡献是对使用非常小的卷积核(3×3)来增加深度的网络架构进行彻底评估,这说明了通过 ...
- Protobuf学习
https://www.jianshu.com/p/2265f56805fa https://www.ibm.com/developerworks/cn/linux/l-cn-gpb/index.ht ...
- hadoop-1.2.1集群搭建
继续上一篇:http://www.cnblogs.com/CoolJayson/p/7430654.html 首先需要安装上台虚拟机, 分别为: master, salve1, slave2 1.复制 ...