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 ...
随机推荐
- Java集合 - 明的博客
"In this world there are only two tragedies. One is not getting what one wants, and the other i ...
- Luogu_1080_国王游戏
题目描述 恰逢H国国庆,国王邀请n位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这n位大臣排成一排,国王站在队伍的最前面.排好队 ...
- python socket粘包及实例
1.在linux中经常出现粘包的出现(因为两个send近靠着,造成接受到的数据是在一起的.)解决方法: 在服务端两send的中间中再添加一个recv(),客户端添加一个send(),服务端收到信息确认 ...
- IPSec 传输模式下ESP报文的装包与拆包过程 - 择日而终的博客
一.IPsec简介 IPSec ( IP Security )是IETF(Internet Engineering Task Force,Internet工程任务组)的IPSec小组建立的一组IP安全 ...
- 面试的绝招(V1.0)
<软件自动化测试开发>出版了 测试开发公开课培训大讲堂 微信公众号:测试开发社区 测试开发QQ群:173172133 咨询QQ:7980068 咨询微信:zouhui1003it
- RocketMQ Py客户端
#!/bin/bash yum install make cmake gcc-c++ python-devel zlib-devel cd /home/amy git clone https://gi ...
- 那些让程序员目瞪口呆的Bug
程序员一生与bug奋战,可谓是杀敌无数,见怪不怪了!在某知识社交平台中,一个"有哪些让程序员目瞪口呆的bug"的话题引来了6700多万的阅读,可见程序员们对一个话题的敏感度有多高. ...
- 我的学习归纳方法(以学习Maven为例)
以我的个人角度来看待学习这件长久的事,希望对你有帮助,也希望你能提一下你的意见 本文初衷 把自己模板化 以此篇为引,与同行沟通心得,所以在此严重要求如果你有对应的心得还请能回复下,真心感谢!(鞠躬) ...
- 安卓之父造手机:该紧张的只有iPhone?
近日,"安卓之父" Andy Rubin正式带来他潜心打造的新款智能手机--Essential.这款设计新颖.配置强大的手机刚一发布,就引起全球科技界的广泛关注.对iPhone.三 ...
- ado.net DataSet
一.概念 DataSet是ADO.NET的中心概念.可以把DataSet当成内存中的数据库,DataSet是不依赖于数据库的独立数据集合.所谓独立,就是说,即使断开数据链路,或者关闭数据库,DataS ...