在移动端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. selenium+python自动化77-autoit文件上传【转载】

    前言 关于非input文件上传,点上传按钮后,这个弹出的windows的控件了,已经跳出三界之外了,不属于selenium的管辖范围(selenium不是万能的,只能操作web上元素).autoit工 ...

  2. quartz 配置运行

    这篇文章是对quartz 2.2.1进行配置 分为spring 整合版本和QuartzInitializerServlet整合版本 首先是QuartzInitializerServlet整合版本 主要 ...

  3. centos7当中的systemd及systemctl(节选)

    全面进入centos7时代,这个东东是需要系统了解的. http://blog.jobbole.com/85070/?utm_source=blog.jobbole.com&utm_mediu ...

  4. Sublime text3 插件ColorPicker(调色板)不能使用快捷键的解决方法

    我的原因是:convertToUTF8和ColorPicker快捷键冲突,convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl+shift+c . ...

  5. windows 下配置浏览器使用 kerberos

    最近 hadoop 一系列软件都给加上了 kerberos 认证,整体来说还算顺利,各组件也都继续正常工作,唯独 storm ui,个天杀的在 windows 上打不开. HTTP ERROR: 40 ...

  6. php中parse_url函数的源码及分析(scheme部分)

    前言 看师傅们的文章时发现,parse_url出现的次数较多,单纯parse_url解析漏洞的考题也有很多,在此研究一下源码(太菜了看不懂,待日后再补充Orz) 源码 在ext/standard/ur ...

  7. HDU 2710 Max Factor(数论,素数筛法)

    #include<iostream> #include<stdio.h> #include<string.h> #include<cmath> usin ...

  8. scrapy生成csv文件空行、csv文件打开乱码(解决方案)

    一.scrapy生成csv文件会有多余的空行 当使用scrapy crawl testspider -o test.csv后,生成的默认csv文件每一行之间是有空行的,解决的方法是修改scrapy的源 ...

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

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

  10. 【最小割】【Dinic】【强联通分量缩点】bzoj1797 [Ahoi2009]Mincut 最小割

    结论: 满足条件一:当一条边的起点和终点不在 残量网络的 一个强联通分量中.且满流. 满足条件二:当一条边的起点和终点分别在 S 和 T 的强联通分量中.且满流.. 网上题解很多的. #include ...