在移动端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输入框解决方法的更多相关文章

  1. 移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  2. 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  3. $(window).scroll在页面没有滚动条时无法触发事件的bug解决方法

    JS //给页面绑定滑轮滚动事件 if (document.addEventListener) { //webkit document.addEventListener('mousewheel', s ...

  4. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

  5. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  6. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  7. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  9. 解惑好文:移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

随机推荐

  1. hdu5076

    好题,首先观察可得w[i][j]选择只有可能两种,一种比阀值大,一种比阀值小 比阀值大就一定选满足条件最大的w,比阀值小同样一定选满足条件最大的w 那么一个最小割模型就呼之欲出了,注意w可能是负数那么 ...

  2. configure.ac中AC_CHECK_LIB的问题

    编译Linux程序时,使用configure.ac生成的configure程序,时常会出现AC_CHECK_LIB检查某个库失败 而相应库通常是存在的,只是依赖于其他的库,此时,需要乃至AC_CHEC ...

  3. centos 修改ftp目录

    # usermod -d /home/www username // # service vsftpd restart // 重启vsftpd 两步搞定

  4. $_ENV 为空的原因

    php.ini里面的variables_order的值为GPCS,修改为EGPCS,然后重启wamp即可. print_r($_ENV); var_dump($_ENV); foreach ($_EN ...

  5. spoj - Longest Common Substring(后缀自动机模板题)

    Longest Common Substring 题意 求两个串的最长公共子串. 分析 第一个串建后缀自动机,第二个串在自动机上跑,对于自动机上的结点(状态)而言,它所代表的最大长度为根结点到当前结点 ...

  6. 读《thinking in java》第一遍笔记

    1.System.out.println(variable)为什么会调用重写的toString方法? 根据我搜到的信息结合源代码,得到以下结论,如有误请告知. 首先我们看一下println方法的源代码 ...

  7. 34、Django实战第34天:退出登录

    编辑users.view.spy ... from django.contrib.auth import authenticate, login, logout from django.http im ...

  8. ASP.net 资源请求漏洞利用工具PadBuster

    ASP.net 资源请求漏洞利用工具PadBuster 在ASP.net 网站中,为了便于部署网站项目,开发者往往会将资源(图片.Javascript文件)嵌入到dll文件中.而网页中,会使用WebR ...

  9. 【线段树】Codeforces Round #393 (Div. 1) C. Nikita and stack

    就是给你一些元素的进栈 出栈操作,不按给定的顺序,要求你对于每次输入,都依据其及其之前的输入,判断出栈顶的元素是谁. 用线段树维护,每次push,将其位置的值+1,pop,将其位置的值-1.相当于寻找 ...

  10. Spark IDEA 调试(反编译)

    1)以WordCount为例,具体代码如下: import org.apache.spark.SparkConf import org.apache.spark.SparkContext; impor ...