vue 监听手机键盘是否弹出及input是否聚焦成功
//定义移动端类型
function pageStats() {
let u = navigator.userAgent,
app = navigator.appVersion;
let obj = {};
obj.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
obj.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
return obj;
}
//监听手机键盘是否弹出
function keyboard(res,size) {
let deviceType = pageStats();
if (deviceType.isiOS) {
setTimeout(function () {
let aaa = document.body.scrollTop;
console.log(aaa);
console.log(size.scrollTop);
if (aaa !== size.scrollTop) {
} else {
//ios端弹出失败回调
}, msg => {
});
}
console.log(aaa !== size.scrollTop); //true 键盘弹出成功
}, 1000)
}
if (deviceType.isAndroid) {
setTimeout(function () {
let bbb = document.body.clientHeight;
console.log(bbb);
console.log(size.windowHeight);
if (bbb !== size.windowHeight) {
} else {
//安卓端弹出失败回调
}, msg => {
});
}
console.log(bbb !== size.windowHeight); //true 键盘弹出成功
}, 1000)
}
}
//手机号输入框获取焦点是否成功
export function clickInput(res) {
let size = {
windowHeight: res.windowHeight,
scrollTop: res.scrollTop
};
res.hasFocus = document.hasFocus() && document.activeElement === res.$refs.phone;
if (res.hasFocus) {
console.log('input聚焦成功');
keyboard(res,size); //键盘是否弹出
} else { //TODO
//聚焦失败回调
console.log('input聚焦失败');
}
}
//写入一个js文件 在组件中引用并传值
例:
<input type="tel" ref="phone" @click="clickInput"/>
<script>
import {clickInput} from '../../assets/js/js文件名'; export default {
data() {
return {
deviceType: null,
scrollTop: 0,
windowHeight: 0
}
},
methods: {
clickInput(){
clickInput(this)
},
getSize () {//TODO 原生JS获取
this.scrollTop = document.body.scrollTop;//document.body.scrollTop() jquery;//用于ios键盘监听
this.windowHeight = document.body.clientHeight;//document.window.offsetHeight() jquery ;//用于Android键盘监听
}, }, mounted() {
this.getSize();
},
}
vue 监听手机键盘是否弹出及input是否聚焦成功的更多相关文章
- Android 另类方法监听软键盘的弹出收起事件
http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...
- c# 获取移动硬盘信息、监听移动设备的弹出与插入事件
原文 http://www.cnblogs.com/coolkiss/p/3328825.html 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr Wnd ...
- Android监听自身卸载,弹出用户反馈调查
1,情景分析 在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用处不大,除了练练NDK功底.这篇博客,我将讲述一下一个各 ...
- Android 应用监听自身卸载,弹出用户反馈调查
监听卸载情景和原理分析 1,情景分析 在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用处不大,除了练练NDK功底.这篇 ...
- Android 如何监听返回键,弹出一个退出对话框
android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用程序不小心点击退出键而直接退出.自己记录下这个简单的demo,备用. public class BackKeyTest ...
- [转]Android 如何监听返回键,弹出一个退出对话框
本文转自:http://blog.csdn.net/sunnyfans/article/details/8094349 Android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用 ...
- Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能
其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件 监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...
- e807. 设置进程监听对话框的延迟弹出
By default, the progress monitor delays for a short period before it is displayed. There are two pro ...
- 使用Picker的时候,让input输入框使用焦点,手机键盘不弹出
$("#address").click(function(){ document.activeElement.blur(); })
随机推荐
- YML文件中ipv6地址输入格式
关于YML文件格式可以百度,这里只说ipv6:yml文件是注重格式的不能用tab键代替空格 ipv4 :10.1.202.9 ipv6: 2001:202::6e4:f32b:c19c:4760 端口 ...
- js的closures(闭包)
JS中的闭包(closure) 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面就是我的学习笔记,对于Javascript初学者应该是很有用 ...
- npm安装material-design-icons总是失败
项目中使用npm或者cnpm安装material-design-icons总是失败 解决办法: 1.自己上github下载后拷贝到项目node_modules目录下 2.还有npm安装老出问题,npm ...
- 关于:无法创建链接服务器 "ORCL" 的 OLE DB 访问接口 "OraOLEDB.Oracle" 的实例 (错误:7302)
本人接触和使用Oracle数据库才有一个季度的时间,问题比较白,大神请无视本文. 环境: 1.数据服务器,windows2008R2,Oracle11g 2.报表服务器,windows2008R2,S ...
- C# [WIN32] [API] Global Hook
NativeMethods.cs: using System; using System.Runtime.InteropServices; namespace GlobalHook { interna ...
- 一条命令关掉centos所有不必要的服务和端口号
centos作为服务器开放的服务多了,难免一些服务软件有漏洞,开放的端口号越多,上线的服务器越危险,所以我们必须在服务器上线之前把centos里面不必要的服务全部干掉,不让坏人有可乘之机. 首先看一下 ...
- 如何优雅的关闭Golang Channel?
Channel关闭原则 不要在消费端关闭channel,不要在有多个并行的生产者时对channel执行关闭操作. 也就是说应该只在[唯一的或者最后唯一剩下]的生产者协程中关闭channel,来通知消费 ...
- svg 高宽随父元素自适应
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
- zsh 缺省输入设置
zsh 默认缺省方式和bash不兼容,终端输入指令带有* 并不能对所有以已经输入的部分作为开头的文件作处理,解决这个问题的方式是在.zshrc文件中加入 setopt no_match 即可
- 异常处理——java基础
Evernote Export 异常处理 异常处理的套路模板: try//创建异常处理{ throw new();//抛出异常 //一旦有异常, 抛出异常后,后面的语句不再执行 语句;{ …… ...