转自https://www.cnblogs.com/devilyouwei/p/6293190.html

mui弹出输入法遮住input表单元素

 

问题如下：当我用mui开发app时，在mui-scroll下的表单元素，input元素点击后会被弹出的输入法遮挡，体验效果下降！

百度了一番后没有找到合适的方法，于是自行研究了一下

需要用到以下两个方法：

1.onresize //检测窗口的变化

2.scrollIntoView() //滚动到可视范围内

直接在body中添加即可，代码如下：

<body onresize="document.activeElement.scrollIntoView(true);">

这样在弹出输入法就不会遮住input了，自动滚动到焦点处

mui弹出输入法遮住input表单元素的更多相关文章

  1. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  2. fastadmin: layer.open 弹出层如何在表单提交之后自动关闭？

    需要在控制器对应的js文件中添加   Form.api.bindevent($("form[role=form]")); define(['jquery', 'bootstrap' ...

  3. input表单元素的默认padding不一致问题

    最近做的项目,发现一堆问题,input type=“text”和type=“button” (1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“t ...

  4. 自定义常用input表单元素二：纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  5. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  6. .net网站开发（一）：1.input表单元素

    其实,在半年前我对网站开发还是完全不感冒的,不是没认识,而是只认识到表面.我以为网站模型就那几样,新闻.论坛.博客啥的,仿个站出来有什么意思?但现在我是知道了,大多应用开发还是采用B/S架构的,包括服 ...

  7. html表单元素及表单元素详解

    原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...

  8. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  9. IOS微信点击input弹出输入法，关闭后页面留白解决方案

    场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加 ...

随机推荐

  1. sqlcook sql经典实例 emp dept 创建语句

    创建表语句 create table dept( deptno int primary key, dname varchar(30), loc varchar(30) ); create table ...

  2. 桥接 brctl

    把eth0和wlan0桥接在一起 作用:测试wlan0网卡的并发性能   两个网卡桥接后把linux主机模拟成一个“无线路由交换机” Vi   br0.sh #!/bin/bash ifconfig ...

  3. mysql float 这个大坑

    以后高精度的数据不要用这个字段  今天同事反应 应该是17390.7的数据 结果展示17390.6992  找了半天问题在哪 后来决定先不管  手动现在数据库改数据 结果手动改也改不过来  于是能确定 ...

  4. 最短路问题--P4779 单源最短路（标准版）Dijkstra堆优化

    题目背景 2018 年7月 19 日,某位同学在 NOI Day 1 T1 归程 一题里非常熟练地使用了一个广为人知的算法求最短路. 最终,他因此没能与理想的大学达成契约. 小 F 衷心祝愿大家不再重 ...

  5. sping中 各种注解——@SuppressWarnings注解用法

    @SuppressWarnings注解用法 @SuppressWarnings注解主要用在取消一些编译器产生的警告对代码左侧行列的遮挡,有时候这会挡住我们断点调试时打的断点. 如图所示: 这时候我们在 ...

  6. vue安装插件指定版本

    安装插件指定版本 npm install 插件名称@2.9.6 --save 查看需要安装插件的版本记录 npm view 插件名称 versions --json

  7. html中的标签总结

    HTML <ul> 元素(或称 HTML 无序列表元素)表示一个内可含多个元素的无序列表或项目符号列表 <ol>元素中的顺序是有意义的 <ul> 元素用来将没有数字 ...

  8. Python 模拟 Base64编码

    Base64编码原理:https://blog.csdn.net/wo541075754/article/details/81734770 def Enbs64(s): # 编码后的结果 result ...

  9. softmax推导以及多分类的应用

  10. 01 语言基础+高级：1-4 接口与多态_day09【继承、super、this、抽象类】

    day09[继承.super.this.抽象类] 三大特性——继承方法重写super关键字this关键字抽象类 教学目标能够解释类名作为参数和返回值类型能够写出类的继承格式能够说出继承的特点能够说出子 ...