//定义移动端类型 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(); }, }