在移动端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. UpdateData、Invalidate、InvalidateRect和UpdateWindow及RedrawWindow

    Invalidate 在消息队列中加入一条WM_PAINT消息,其无效区为整个客户区. 窗口的客户区无效意味着需要重绘.例如,如果一个被其它窗口遮住的窗口变成了前台窗口,那么原来被遮住的部分就是无效的 ...

  2. JSONObject依赖包

    commons-lang.jar commons-beanutils.jar commons-collections.jar commons-logging.jar ezmorph.jar json- ...

  3. thinkphp5.0配置nginx重写规则

    我的centeros7.3系统,单主机实例: vi /usr/local/nginx/conf/nginx.conf 在如图红框位置加入以下代码(图片是截取的,截取部分上方还有其他的默认配置代码,代码 ...

  4. HDU 1015 Safecracker【数值型DFS】

    Safecracker Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. G - Rescue 【地图型BFS+优先队列(有障碍物)】

    Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is described as a N * M ...

  6. POJ 1113 Wall(凸包)

    [题目链接] http://poj.org/problem?id=1113 [题目大意] 给出一个城堡,要求求出距城堡距离大于L的地方建围墙将城堡围起来求所要围墙的长度 [题解] 画图易得答案为凸包的 ...

  7. 【数论】【筛法求素数】CODEVS 1462 素数和

    好吧……我不会欧拉筛也就罢了…… 傻逼筛法竟然这么长时间以来 一直RE ……源头竟然是 int 爆了. #include<cstdio> #include<algorithm> ...

  8. 静态html分页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Delphi 窗体失踪在最上面的代码

    unit ufrmSysPubMessage; interface uses  Windows, Forms, Messages, Classes, ExtCtrls, Controls, StdCt ...

  10. [bug] VS2013 Brower Link和Aspnetpager引发的问题分析

    概述 在ie11上浏览页面的时候,突然发现在使用Aspnetpager的页面会有一个bug. 开发环境:win8.1+vs2013+ie11. 项目描述:这个问题出现在内容页中,应用了母版页. 解决方 ...