手机端页面 输入法覆盖输入框问题
2016-03-16 15:03
225 查看
问题:移动端网页,当用户点击输入框时,手机弹出的输入法会覆盖输入框,影响用户体验。
解决思路:用户点击输入框后,让整个页面向上滑动一定距离,让输入框高于输入法即可。
代码实现:
<input type="text" id="name" onfocus="NameChangeHeight()" />
function NameChangeHeight() {
setTimeout(function () { $('body').scrollTop(200px); }, 500);
}
解析:有人说,为什么直接用$('body').scrollTop(200px)不起作用?加上setTimeout就可以了?因为输入法弹出来也是需要一定时间的,输入法弹出来后才会计算、改变scrollTop。
解决思路:用户点击输入框后,让整个页面向上滑动一定距离,让输入框高于输入法即可。
代码实现:
<input type="text" id="name" onfocus="NameChangeHeight()" />
function NameChangeHeight() {
setTimeout(function () { $('body').scrollTop(200px); }, 500);
}
解析:有人说,为什么直接用$('body').scrollTop(200px)不起作用?加上setTimeout就可以了?因为输入法弹出来也是需要一定时间的,输入法弹出来后才会计算、改变scrollTop。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- 5个常见可用性错误和解决方案
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Erlang实现的一个Web服务器代码实例