手机端上点击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"> < ...
随机推荐
- 关于nexus的学习
1.首先下载 解压版: 2.将nexus的bin目录路径 写入 环境变量path中: 3.修改 nexus配置文件wrapper.conf 15行 ,指定java.exe文件位置(例如:wra ...
- 1.2 认识python(了解)
一.Python发展背景 Python的作者,Guido von Rossum(吉多·范·罗苏姆,中国Python程序员都叫他 龟叔),荷兰人.1982年,龟叔从阿姆斯特丹大学获得了数学和计算机硕士学 ...
- luogu P4770 [NOI2018]你的名字
传送门 upd 19.4.24: WC这个做法真的有问题,不往回跳会WA是因为一开始跳到了S[1...l-1]所对应的点,然后往后接字符的时候可能会因为不在正确的endpos中,然后往回跳过头,其实一 ...
- Censys
Censys Censys持续监控互联网上所有可访问的服务器和设备,以便您可以实时搜索和分析它们,了解你的网络攻击面,发现新的威胁并评估其全球影响.从互联网领先的扫描仪ZMap的创造者来说,我们的使命 ...
- 【blog】使用highlight.js高亮你的代码
我的代码 <!--代码高亮插件--> <link rel="stylesheet" type="text/css" href="/w ...
- python基础-----函数/装饰器
函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 函数的优点之一是,可以将代码块与主程 ...
- CentOS7开启防火墙及特定端口
开启防火墙服务 以前为了方便,把防火墙都关闭了,因为现在项目都比较重要,害怕受到攻击,所以为了安全性,现在需要将防火墙开启,接下来介绍一下步骤. 1, 首先查看防火墙状态: firewall-cmd ...
- Python-有关文件操作,函数调用几道练习:
1.写函数,,用户传入修改的文件名,与要修改的内容,执行函数,完成批了修改操作 2.写函数,计算传入字符串中[数字].[字母].[空格] 以及 [其他]的个数 3.写函数,判断用户传入的对象(字符串. ...
- valgrind简介以及在ARM上交叉编译运行【转】
转自:https://blog.csdn.net/dengcanjun6/article/details/54958359 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...
- vue2+axios在不同的环境打包不同的接口地址
node.js的环境变量 process process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对于 Node.js 应用程序始终是可用 ...