移动端H5页面指南教程input获取焦点时,虚拟键盘挡住input输入框解决方法_输入框指南教程

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

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

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

移动端H5页面指南教程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>
海计划公众号
(1)
上一篇 2020/04/05 01:57
下一篇 2020/04/05 01:57

您可能感兴趣的内容

  • 优秀工程师要具备哪些能力?使用帮助_工程师小白帮助

    平庸的人总是相似,优秀的人却各不相同。在这各不相同的特性里,掩藏着怎样的共性?据说这十大能力,是通往优秀工程师之路的必备资质。预备工作的能力常言道“一日之计在于晨”,一天的工作效率,其实取决于早晨的工作状态。我们的工程师每天早晨来到公司,都会这么做: 主动与身边的同事打招呼,面带微笑。清理自己的办公桌,保持干净整洁。打开电脑,顺便可以去倒一杯水。打开钉钉、微

    2020/03/29
  • 实现平滑过渡的拖拽排序入门基础_拖拽新手入门

    最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到, 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下:例子中实现的效果看起来还是非常不错的,这个效果使我想起来另外一个使用场景,之前我在实现一个列表展示需求的时候,PM想让这个列表具有拖动排序的功能,方便他操作(事实上我最后并没有给他做

    2020/03/30
  • TypeScript 中高级应用与最佳实践教程视频_TypeScript菜鸟教程下载

    当我们讨论 TypeScript 时,我们在讨论什么?TypeScript 的定位JavaScript 的超集编译期行为不引入额外开销不改变运行时行为始终与 ESMAScript 语言标准一致 (stage 3 语法)TypeScript 中的 Decorator 较为特殊,为 Angular 团队和 TypeScript 团队交易的结果,有兴趣可自行搜索相

    2020/03/26
  • css中input与button在一行高度不一致的解决方法小白基础_宽高小白帮助

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码:
    input,button{width:100px;height: 60px;
    }

    2020/04/05
  • 在textarea和input光标处插入内容,支持ie基础知识_光标小白知识

    项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效。直接上代码 function insertAtCursor(myField, myValue) {//IE supportif (document.selection) {myField

    2020/03/23
  • Odometer.js使用攻略_js数字滚动插件

    Odometer.js使用攻略 官方网址:http://github.hubspot.com/odometer/docs/welcome/ GitHub:https://githu…

    2020/03/06
  • 自己动手实现一个axios菜鸟教程网_axios使用帮助

    前言作为一名前端er,对于数据请求的第三方工具axios,一定不会陌生,如果还是有没有用过,或者不了解的小伙伴,这里给你们准备了贴心的中文文档 ,聪明的你们一看就会~唔,为了更好的了解和学习 axios 封装思想和实现原理,我们一起来动手来实现一个简版的 axios ~前期准备工欲善其事,必先利其器,我们在开始我们的项目之前,一定要做好其相关的准备工作,我们

    2020/03/24
  • 为什么NodeJS那么流行?菜鸟攻略_node指南攻略

    Node.js用于创建和运行各种类型的Web应用程序,这与其他一些框架类似。在Nodejs开发中,JavaScript用作主要语言。该节点程序包管理器(NPM)具有由轻量级的内置Web服务器,它允许您自定义应用程序构建满足您的需求管理插件过量。NodeJS是一种优秀的Web技术,具有某些最佳功能,使其在开发人员中很受欢迎。下面就来介绍一些NodeJS流行的原

    2020/03/31
  • PHP 实现压缩解压操作入门基础教程_压缩零基础入门

    在php中,有时我们需要使用到压缩文件操作,压缩文件可以节省磁盘空间;且压缩文件更小,便于网络传输,效率高,下面我们就来了解php的压缩解压相关操作在PHP中有一个ZipArchive类,专门用于文件的压缩解压相关操作在ZipArchive类中主要使用到了如下方法:1:open(打开一个压缩包文件)$zip = new \ZipArchive;
    $zip->

    2020/03/29
  • CSS :placeholder-shown伪类实现Material Design占位符交互效果入门基础知识_效果小白指南

    一、Material Design规范中占位符交互效果Material Design风格占位符交互效果官方示意见此demo页面。现在这种设计在移动端很常见,相信不少人设计项目中有实现过这种交互,而且,大部分是利用JS实现的。(ps:weex 不支持这个样式)实际上,我们可以借助CSS :placeholder-shown伪类,纯CSS,无任何JS,实现这样的

    2020/03/26
  • 在 React 中使用 Typescript基础指南_Typescript菜鸟指南

    前言用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松的实现重构。顺便一提:全局安装的 create-react-app 现已无法再下载完整的 React 项目模版,必须先 npm uninstall -g crea

    2020/03/20
  • URL中“#” “?” &“”号的作用入门教程_url基础入门

    1. #10年9月,twitter改版。一个显著变化,就是URL加入了”#!”符号。比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username这是主流网站第一次将”#”大规模用于重要URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatc

    2020/03/30
  • MySQL中Explain初识攻略教程_mysql攻略教程

    IndexMySQL索引的基本操作CREATE INDEX idx_price on OrderItems(item_price);
    ALTER TABLE OrderItems DROP INDEX idx_order_num_price;ExplainMySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT 语句进行分析, 并输出 SEL

    2020/03/26
  • Jcrop小白指南一个功能强大的 jQuery 图像裁剪插件

    Jcrop使用帮助 官方网址:http://deepliquid.com/content/Jcrop.html GitHub:https://github.com/tapmodo/…

    2020/03/06
  • javascript中如何截取字符串?小白入门_字符串菜鸟教程下载

    JavaScript中截取字符串有三种方法,分别是substring(),substr(),split()。下面本篇文章就来给大家介绍一下它们的使用方法,希望对大家有所帮助。方法1:使用substring()substring()方法用于提取字符串中介于两个指定下标之间的字符。语法:substring(start,stop)● start:一个非负的整数,指

    2020/03/22
  • html转义字符大全菜鸟知识网页html特殊符号,特殊字符查看对照表(整理)_网页菜鸟教程

    在HTML中,某些字符是预留的。比如不能使用小于号(),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体HTML中一些无法打出来的符号可以用相应的代码进行代替显示,以下对照表提供了一些HTML特殊符号相应的代码。特殊符号命名实体十进制编码特殊符号命名实体十进制编码特殊符号命名实体十进制编

    2020/04/06