移动端页面input输入框被键盘遮挡问题
<body class="layout-fixed">
<!-- fixed定位的头部 -->
<header> </header> <!-- 可以滚动的区域 -->
<main>
<!-- 内容在这里... -->
</main> <!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>v
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left:;
right:;
top:;
}
footer {
position: fixed;
height: 34px;
left:;
right:;
bottom:;
}
main {
margin-top: 50px;
margin-bottom: 34px;
height: 2000px
}
下面这个样子。
键盘唤起下面这样
是为什么呢?: 软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可理解为成了 absolute 定位)
解决方案: 将原 body 滚动的区域域移到 main 内部
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left:;
right:;
top:;
}
footer {
position: fixed;
height: 34px;
left:;
right:;
bottom:;
}
main {
/* main绝对定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
}
main .content {
height: 2000px;
}
h5底部输入框被键盘遮挡问题
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","static");
}else{ $("#footer").css("position","absolute");
} });
js解决软键盘遮挡输入框问题
链接 http://blog.csdn.net/u011500781/article/details/53926425
移动端页面input输入框被键盘遮挡问题的更多相关文章
- 苹果微信input输入框被键盘遮挡
最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候, 苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住.可以用以下方法解决: docu ...
- H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
- 移动端,input输入框被手机输入法解决方案
当界面元素靠下时候的时候,input输入框会被系统的键盘遮挡. 我们可以让界面向上移动一定距离去避免遮挡. $('#money').click(function(){ setTimeout(funct ...
- h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法
前言: 从以前的项目中找一个问题的解决方案,顺带找到了这个安卓机型调起输入法,页面没有自动上滑导致输入框被弹起的键盘遮挡的解决方案.这个问题只有安卓机型页面中的输入框处于底部(也就是底部键盘区域)的时 ...
- AngularJS移动端页面input无法输入
用angularJS写手机页面,有时候会发现input输入框点击了却不能输入,或者长按才能输入,可能是因为input绑定了ng-click导致,可去掉ng-click,将ng-click绑定的方法改用 ...
- iOS解决表格中TextField,TextView编辑时,输入框被键盘遮挡的问题
方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...
- 移动端解决input focus后键盘弹出,高度被挤压的问题
//解决弹出键盘页面高度变化bug var viewHeight = window.innerHeight; //获取可视区域高度 $("input").focus(functio ...
- 去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影
input, textarea, button, a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
随机推荐
- mybatis逆向工程
一.背景 在实际开发中我们会自己去写mapper映射文件,接口,数据库表对应的实体类,如果需求任务比较少,咱们还可以慢慢的一个一个去写,但是这是不现实的,因为在工作中我们的任务是很多的,这时mybat ...
- nodejs里的module.exports和exports
引 在node.js中我们可以使用module.exports和exports导出模块,设置导出函数.数组.变量等等 为什么可以用这两个模块? 或者直接问,node.js的模块功能是怎么实现的. 这样 ...
- [译]ASP.NET Core 2.0 依赖注入
问题 如何使用 ASP.NET Core 服务容器进行依赖注入? 答案 创建一个服务 public interface IGreetingService { string Greet(string t ...
- 【JDK1.8】JDK1.8集合源码阅读——HashMap
一.前言 笔者之前看过一篇关于jdk1.8的HashMap源码分析,作者对里面的解读很到位,将代码里关键的地方都说了一遍,值得推荐.笔者也会顺着他的顺序来阅读一遍,除了基础的方法外,添加了其他补充内容 ...
- JAVA基础知识总结:二
一.数据类型 1.常量 在程序运行的过程中,值不会发生改变的标识符 常量的分类:整数常量.小数常量.布尔值常量.字符常量.字符串常量.null常量 2.变量 表示的值可以发生改变 定义一个变量,需要在 ...
- angularJs 个人初探笔记
1.环境搭建与angular - phoneCat 安装可以通过git clone来下载源代码: git clone --depth=14 https://github.com/angular/ang ...
- 机器学习之三:logistic回归(最优化)
一般来说,回归不用在分类问题上,因为回归是连续型模型,而且受噪声影响比较大.如果非要应用进入,可以使用logistic回归. logistic回归本质上是线性回归,只是在特征到结果的映射中加入了一层函 ...
- 2-SAT问题总结
2-SAT问题总结 2-SAT问题:n个布尔型的变量,给出m个约束条件,约束条件例如:A,B不能同时为真,A,B必须同时为真等. 看了算法入门经典中的解决办法,关于这种解决办法比较容易理解,并且效率也 ...
- 2015-2016 ACM-ICPC, NEERC, Southern Subregional Contest I Lottery
LotteryCrawling in process... Crawling failed Time Limit:2000MS Memory Limit:524288KB 64bit ...
- 用正则表达式(regex)匹配多项式(polynomial)
因为作业的要求,我需要识别用户从命令行输入的多项式,并且要提取出其中的系数.指数以便用于后续计算. 曾经想过用一个数组把用户所有的输入全部存进来,然后在写逻辑判断.但想想那复杂的逻辑,头皮都发麻,这时 ...