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

方法一:使用window.scrollTo()

 <input type="text" onfocus="inputFocus()"/>
 <script>
function inputFocus(){
setTimeout(function(){
window.scrollTo(,document.body.clientHeight);
}, );
}
</script>

设计坞官网https://www.wode007.com/sites/73738.html

 

方法二:使用scrollIntoView

 <input type="text" onfocus="inputFocus()" id="dom"/>
<script>
function inputFocus(){
var dom=document.getElementById('dom')
setTimeout(function(){
dom.scrollIntoView(true);
dom.scrollIntoViewIfNeeded();
}, );
}
</script>

移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法的更多相关文章

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

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

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

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

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

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

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

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

  5. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

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

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

  7. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  8. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

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

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

随机推荐

  1. java实现拼出漂亮的表格

    /* * 在中文 Windows 环境下,控制台窗口中也可以用特殊符号拼出漂亮的表格来. 比如: ┌─┬─┐ │ │ │ ├─┼─┤ │ │ │ └─┴─┘ 其实,它是由如下的符号拼接的: 左上 = ...

  2. java实现第七届蓝桥杯有奖竞猜

    有奖竞猜 题目描述 小明很喜欢猜谜语. 最近,他被邀请参加了X星球的猜谜活动. 每位选手开始的时候都被发给777个电子币. 规则是:猜对了,手里的电子币数目翻倍, 猜错了,扣除555个电子币, 扣完为 ...

  3. 【网页设计】第四周 JavaSript

    第四周  JSP 一  JSP概述 含义: Java Server Pages, 广泛使用的服务器端脚本语言之一:(运行在服务器端  BS结构) 由服务器端的JSP引擎执行JSP代码,然后将结果以HT ...

  4. 面试官:说说Redis的Hash底层 我:......(来自阅文的面试题)

    redis源码分析系列文章 [Redis源码系列]在Liunx安装和常见API 为什么要从Redis源码分析 String底层实现——动态字符串SDS Redis的双向链表一文全知道 前言 hello ...

  5. 多线程实现tcp聊天服务器

    多线程tcp  server & client tcp服务端(多线程): from socket import * from threading import Thread def clien ...

  6. 【 哈希和哈希表】Three Friends【进制哈希】

    Three Friends 传送门:链接 (UPC)或  链接(大视野) 题目描述 Three friends like to play the following game. The first f ...

  7. windows环境下tensorflow安装过程详解

    写在最前: 在安装过程中遇到很多坑,一开始自己从官网下载了Python3.6.3或者Python3.6.5或者Python3.7.1等多个版本,然后直接pip install tensorflow或者 ...

  8. Spring系列.AOP使用

    AOP简介 利用面向对象的方法可以很好的组织代码,也可以继承的方式实现代码重用.但是项目中总是会出现一些重复的代码,并且不太方便使用继承的方式把他们重用管理起来,比如说通用日志打印,事务处理和安全检查 ...

  9. NodeJs通过HTTP模块发起GET|POST请求

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] Node.js ...

  10. 前端笔记:div只显示两行内容,多出内容以...显示

    代码: text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-bo ...