转自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. PAT 2019 秋

    考试的还行.不过略微有点遗憾,但是没想到第一题会直接上排序和dfs,感觉这次的题目难度好像是倒着的一样.哈哈哈哈. 第一题实在是搞崩心态,这道题给我的感觉是,可以做,但事实上总是差点啥. 第二题,第三 ...

  2. Java四类八种

    四类: 整数类型,浮点类型,字符型,布尔型 八种: byte,short,int,long,float,double,char,boolean

  3. delphi 串口的打开与关闭

    Delphi 打开串口与关闭串口 procedure TForm1.btn1Click(Sender: TObject); begin cm1.CommName:=cbb1.Text; cm1.Bau ...

  4. CSS3新特性—过渡、转换

    过渡 转换 2D转换 2D转换包括四个方面:位移,缩放,旋转,倾斜 位移[让元素移动位置] transform: translate(100px,100px); 备注: 1. 如果只设置一个值,那么代 ...

  5. 当我们进行综合和I/O布局后会发生什么QwQ

    基于的平台是Vivado 2018.2 本文主要以一个简单的半加器加器(组合逻辑为例)学习vivado的综合,I/O配置的一些内容. 本人小白,记一些自己的理解. 任务: 分析Log文件. 布局I/O ...

  6. 干货 | VPC之间的网络连通实践

    随着公有云技术的日臻完善,越来越多的政府部门.事业单位.企业.个人将自己的IT系统部署在公有云之上.在公有云之上部署业务系统有一个特点,就是先要规划网络,有了网络以后,才能把一些相关的产品部署在网络里 ...

  7. one_day_one_linuxCmd---sz命令

    <坚持每天学习一个 linux 命令,今天我们来学习 sz && rz 命令> 前言:我们一般通过 ssh 客户端来进行远程登录和管理的,windows主机使用 ssh 登 ...

  8. UML-UML工具与UML蓝图

    1.UML应用场景 1).UML作为草图 2).UML作为蓝图. UML生成java代码(前向工程) java代码生成UML(逆向工程) 2.如果绘制了UML草图,如何在编码后更新该图形? 逆向工程, ...

  9. PAT 2011 秋

    A : World Cup Betting #include <cstdio> #include <iostream> #include <algorithm> u ...

  10. Python 学习笔记：Python 使用 pandas 读取数据库并进行绘图

    上次写了在 Python 怎么使用 mssql 库来对 SQL Server 数据库进行增删查改,今天就写一下 Python 如何通过 pandas 来读取数据库并进行绘图. 一.读取数据库: 利用 ...