在移动端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. 关于 Notepad++ 崩溃之后正在编辑文件内容被清空的致命问题的补救措施

    Notepad++ 以其功能强大.界面简洁.操作简单方便.超低内存耗用而受众多挨踢从业者青睐. Notepad++ 不像 UE 那样在你编辑的时候会定时生成 bak 备份文件.虽然 Notepad++ ...

  2. selenium+python自动化82-只截某个元素的图【转载】

    前言 selenium截取全图小伙伴们都知道,曾经去面试的时候,面试官问:如何截图某个元素的图?不要全部的,只要某个元素...小编一下子傻眼了,苦心人,天不负,终于找到解决办法了. selenium截 ...

  3. hdu 5191(思路题)

    Building Blocks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. Android日志打印类LogUtils,能够定位到类名,方法名以及出现错误的行数并保存日志文件

    Android日志打印类LogUtils,能够定位到类名,方法名以及出现错误的行数并保存日志文件 在开发中,我们常常用打印log的方式来调试我们的应用.在Java中我们常常使用方法System.out ...

  5. RabbitMQ使用介绍(python)

    在我们的项目开发过程中,我们有时会有时候有两个或者多个程序交互的情况,当然就会使用到这里的消息队列来实现.现在比较火的就是RabbitMQ,还有一些ZeroMQ ,ActiveMQ 等等,著名的ope ...

  6. 使用IIFE(立即执行函数)让变量私有化

    今天去看了一个GITHUB上的开源项目,在客户端JS的脚本编写的时候,代码中多次使用了IIFE. 一开始我是懵逼的,不知道这种函数的意义何在,小菜鸟嘛. 后面我去研究了一番.发现了它的主要作用就是:让 ...

  7. Hibernate 配置文件precision与scale

    Oracle使用标准.可变长度的内部格式来存储数字.这个内部格式精度可以高达38位. NUMBER数据类型可以有两个限定符,如: column NUMBER ( precision, scale) 表 ...

  8. [APIO2015]巴厘岛的雕塑

    题目描述 印尼巴厘岛的公路上有许多的雕塑,我们来关注它的一条主干道. 在这条主干道上一共有 NN 座雕塑,为方便起见,我们把这些雕塑从 11 到 NN 连续地进行标号,其中第 ii 座雕塑的年龄是 Y ...

  9. 【数论】【快速幂】CODEVS 2952 细胞分裂 2

    裸快速幂取模,背诵模板用. #include<cstdio> using namespace std; typedef long long LL; LL n=,m,q; LL Quick_ ...

  10. 1.1(学习笔记)Servlet简介及一个简单的实例

    一.Servlet简介 Servlet是使用Java语言编写的服务器端程序,可以生产动态的Web界面. 主要运行在服务器端,Servlet可以方便的处理客户端传来的HTTP请求,并返回一个响应. 二. ...