移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法:
方法一:使用window.scrollTo()
<input type="text" onfocus="inputFocus()"/> <script>
function inputFocus(){
setTimeout(function(){
window.scrollTo(0,document.body.clientHeight);
}, 500);
}
</script>
方法二:使用scrollIntoView
<input type="text" onfocus="inputFocus()" id="dom"/> <script>
function inputFocus(){
var dom=document.getElementById('dom')
setTimeout(function(){
dom.scrollIntoView(true);
dom.scrollIntoViewIfNeeded();
}, 500);
}
</script>
.
移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法的更多相关文章
- 移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
- 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...
- $(window).scroll在页面没有滚动条时无法触发事件的bug解决方法
JS //给页面绑定滑轮滚动事件 if (document.addEventListener) { //webkit document.addEventListener('mousewheel', s ...
- app内嵌h5页面在ios手机端滑动卡顿的解决方法
1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 解惑好文:移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
随机推荐
- virgo-tomcat没有任务错误日志的停掉的解决办法
最近virgo-tomcat总是无缘无故的down掉,用了下面的几种方法来解决这个问题,具体哪个方法生效了,目前还不清楚...1. 删掉了home/logs下面的很大的日志文件 2. 在.bash_p ...
- ZOJ 3332 Strange Country II (竞赛图构造哈密顿通路)
链接:http://www.icpc.moe/onlinejudge/showProblem.do?problemCode=3332 本文链接:http://www.cnblogs.com/Ash-l ...
- Android学习--广播机制
广播机制简介 Android的广播可以分为两种类型的,标准广播和有序的广播: 标准广播: 是一种完全异步执行的广播,在广播发出去之后,所有的广播接收器几乎是同一时接收到这条广播. 有序广播: 是一 ...
- springboot Hello World探究
Hello World探究1.POM文件1.父项目 <parent> <groupId>org.springframework.boot</groupId> ...
- 洛谷P1095 绝地武士的逃离
好吧原题是守望者的逃离,我强行改了一波题面,因为信仰=-=(? May the force be with us. 绝地跑步速度为17m/s,但无法逃离荒岛.绝地的原力恢复速度为4点/s,只有处在原地 ...
- sum (bestcoder)
sum Accepts: 640 Submissions: 1744 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/13107 ...
- 4、Django实战第4天:xadmin快速搭建后台管理系统
Django默认为我们提供了后台管理系统admin, urls.py中配置的第一条就是访问后台管理系统admin的 urlpatterns = [ url(r'^admin/', admin.site ...
- 棋盘V
问题 A: 棋盘V 时间限制: 1 Sec 内存限制: 128 MB提交: 150 解决: 3[提交] [状态] [讨论版] [命题人:] 题目描述 有一块棋盘,棋盘的边长为100000,行和列的 ...
- ant脚本调用.bat文件
build.xml内容如下: <project name="example" default="test"> <target name=&qu ...
- [CTSC2017]最长上升自序列(伪题解)(Dilworth's theorem+网络流)
部分分做法很多,但每想出来一个也就多5-10分.正解还不会,下面是各种部分分做法: Subtask 1:k=1 LCS长度最长为1,也就是说不存在j>i和a[j]>a[i]同时成立.显然就 ...