移动端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文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
随机推荐
- “pip failed to create process”的问题
增加python -m的方法能完美解决pip,easy_install 安装时报错:“pip failed to create process”的问题,据推测应该是64bit操作系统下会是如此. Wi ...
- (六)if流程控制
(1)单分支结构 if 条件判断;then fi 例 #!/bin/bash read -p "please input Y" num if [ "$num" ...
- python操作数据库的几种方式
参照python 操作mysql python-mysqldb : http://www.cnblogs.com/wupeiqi/articles/5095821.html (python3 不支持) ...
- ipython notebook install
1.python install (ubuntut系统默认2.7.x) Github: https://github.com/ipython/ipython 2.sudo apt-get instal ...
- 进程注入后门工具Cymothoa
进程注入后门工具Cymothoa Cymothoa是一款隐秘的后门工具.它通过向目标主机活跃的进程注入恶意代码,从而获取和原进程相同的权限.该工具最大的优点就是不创建新的进程,不容易被发现.由于该 ...
- POJ 3246 Game(凸包)
[题目链接] http://poj.org/problem?id=3246 [题目大意] 给出一些点,请删去一个点,使得包围这些点用的线长最短 [题解] 去掉的点肯定是凸包上的点,所以枚举凸包上的点去 ...
- 【set】bzoj2761 [JLOI2011]不重复数字
set去重. #include<cstdio> #include<set> using namespace std; set<int>S; ],b[],en; in ...
- [OpenJudge8786][暴力DP]方格取数
方格取数 总时间限制: 1000ms 内存限制: 65536kB [描述] 设有N*N的方格图(N<=10),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字0.如下图所示(见样例): ...
- codevs与noi做题改错本目录
从2016.2.13开始: 1. 排序超时的问题---------目录:-测试习题 2. 超高精度乘法超时问题-----------目录:高精度计算 算法:快速傅里叶算法. 压位算法 3. 高精度 ...
- webservice_客户端生成工具
1. axis java -Djava.ext.dirs=lib org.apache.axis.wsdl.WSDL2Java -p com.qunar.flight.flagship.provide ...