//定义移动端类型
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是否聚焦成功的更多相关文章

  1. Android 另类方法监听软键盘的弹出收起事件

    http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...

  2. c# 获取移动硬盘信息、监听移动设备的弹出与插入事件

    原文 http://www.cnblogs.com/coolkiss/p/3328825.html 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr Wnd ...

  3. Android监听自身卸载,弹出用户反馈调查

    1,情景分析 在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用处不大,除了练练NDK功底.这篇博客,我将讲述一下一个各 ...

  4. Android 应用监听自身卸载,弹出用户反馈调查

    监听卸载情景和原理分析 1,情景分析 在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用处不大,除了练练NDK功底.这篇 ...

  5. Android 如何监听返回键,弹出一个退出对话框

    android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用程序不小心点击退出键而直接退出.自己记录下这个简单的demo,备用. public class BackKeyTest ...

  6. [转]Android 如何监听返回键,弹出一个退出对话框

    本文转自:http://blog.csdn.net/sunnyfans/article/details/8094349 Android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用 ...

  7. Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能

    其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件 监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...

  8. e807. 设置进程监听对话框的延迟弹出

    By default, the progress monitor delays for a short period before it is displayed. There are two pro ...

  9. 使用Picker的时候,让input输入框使用焦点,手机键盘不弹出

    $("#address").click(function(){ document.activeElement.blur(); })

随机推荐

  1. python输入字符串

    #!/usr/bin/env python#ecoding=utf-8'''Created on 2017年11月2日题目:利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出来. @autho ...

  2. Go-ethereum源码解析-Part I

    1. 整体概览 makefile CANDY: .PHONY: geth android ios geth-cross swarm evm all test clean 已知phony 目标并非是由其 ...

  3. python之路-数据类型(方法)

    Int i = 1 print(i.bit_length()) # 转化成二进制的最小位数. ''' 0000 0001 ''' Str class str(basestring): "&q ...

  4. 201671010142 2017-2 《java第九章学习感悟》

    一,数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. 二.几种重要 ...

  5. POJO、JavaBean、DTO的区别

    一.POJO(Plain Ordinary Java Object)简单的Java对象,其中有一些属性及其getter setter方法的类,没有业务逻辑(重点理解一下"没有业务逻辑&quo ...

  6. 如何用EFCore Lazy Loading实现Entity Split

    α角 与 β角 支持 现实生活 的 计算机系统,总有着两大偏差,第一个是 现实生活 与 计算机系统 的α角,另外一个是计算机系统的 逻辑设计 与 物理设计 的β角.举个栗子: α角:假设某个公司的商业 ...

  7. 解决Warning: mysql_connect(): Headers and client library minor version mismatch. 警告

    php -i|grep Client 查询当前Client 版本,结果如下: Client API version => 5.6.31Client API library version =&g ...

  8. Python Opencv安装环境搭建

    https://blog.csdn.net/weifenglin1997/article/details/78723544

  9. Oracle学习DayOne(SQL初步)

    一.DML.DDL.DCL SQL语句分为以下三种类型: DML: Data Manipulation Language 数据操纵语言DDL: Data Definition Language 数据定 ...

  10. 实现自适应位置--footer紧贴浏览器底部

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>紧贴浏览 ...