H5解决安卓软键盘弹出遮蔽的方法
首先先判断是否为安卓,是的话才添加事件监听,获取焦点元素判断是否为input或者textarea类型,是的话,Element.scrollIntoView() 方法会让当前的元素滚动到浏览器窗口的可视区域内
created () {
var u = navigator.userAgent
if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
this.onFoucs()
}
},
methods: {
onFoucs () {
window.addEventListener('resize', function () {
alert('android')
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
alert(document.activeElement.tagName)
// alert('2332323')
window.setTimeout(function () {
alert('scroll')
document.activeElement.scrollIntoView()
}, 1)
}
})
}
},
H5解决安卓软键盘弹出遮蔽的方法的更多相关文章
- 解决react-native软键盘弹出挡住输入框的问题
解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
- H5页面 绝对定位元素被 软键盘弹出时顶起
H5页面 绝对定位元素被 软键盘弹出时顶起 在h5页面开发的过程中,我们可能会遇到下面这个问题,当页面中有输入框的时候,系统自带的软盘会把按钮挤出原来的位置.那么我们该怎么解决呢?下面列出一下的方法: ...
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- 小米note3,华为手机,软键盘弹出之后,页面上定位的元素布局会乱掉
原因:可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').he ...
- Android软键盘弹出时布局问题
最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...
- ionic项目中 软键盘弹出之后的问题:
Android SDK目前提供的软键盘弹出模式接口只有两种: 一是弹出时自动回冲界面,将所有元素上顶: 一种则是不重绘界面,直接将控件元素遮住: 1. ionic 中弹出键盘遮挡住输入框(覆盖 ...
- android软键盘弹出引起的各种不适终极解决方案
android软键盘弹出引起的各种不适终极解决方案 以下描述如何解决ListView高度小于0时出现的UI问题. 创建RelativeLayout的子类TxrjRelativeLayout publi ...
- android控制软键盘弹出方式
android一把自带的软键盘弹出方式是会将布局顶上去,造成UI乱套的情况. 解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindo ...
随机推荐
- 64位WIN7 配置IIS遇到问题
App_global.asax.sr8_llzl.dll' -- '拒绝访问. 设置c:windows\temp 目录访问权限 temp--> 属性-->安全-- > 添加IIS_I ...
- 吴裕雄--天生自然python学习笔记:Python3 输入和输出
输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数. 第三种方式是使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用. 如果你希望输出的 ...
- 了解DocumentFragment 给我们带来的性能优化
首先我们需要了解 DocumentFragment 是什么? w3c 上面的详细解释:link here 我把关键点写下来了: DocumentFragment 节点不属于文档树,继承的 parent ...
- 吴裕雄--天生自然 R语言开发学习:回归
#------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...
- JS做深度学习2——导入训练模型
JS做深度学习2--导入训练模型 改进项目 前段时间,我做了个RNN预测金融数据的毕业设计(华尔街),当时TensorFlow.js还没有发布,我不得已使用了keras对数据进行了训练,并且拟合好了不 ...
- 将js进行到底:node学习7
Node.js之Websocket技术 我第一次听说websocket之时,HTML5标准尚未公布,当时只有少数前瞻性浏览器携带了这个API. 我对websocket最大的印象是,他可以解决我对&qu ...
- 不同环境下的mvn运行指令
///////////////// 研发环境 //////////////////////////////////////// 清空环境: mvn clean -DAPP_ENV=dev 建立Ecli ...
- Centos7上查看ext4文件系统的实际创建时间
前提:今日查看nginx日志时发现有报错,说是一些js,css文件找不到,于是想到去实际路径下查看文件是否确实不存在.结果出现下图中报错: 经过别人提醒查看文件的时间,于是看了一下登上服务器是9:52 ...
- js作用域其二:预解析
文章目錄 解析机制 JavaScript是一门解释型的语言 , 想要运行js代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript ...
- json_encode在设计api时需要注意的问题
1. 在设计api时我们经常会使用关联数组,例如:我要返回给客户端主题信息和主题包列表 原始数组格式 $arr = array( 100=>array('themeName'=>'a',' ...