h5 解决ios端弹出窗口中输入内容，失去焦点问题

最新推荐文章于 2022-04-23 16:03:29 发布

穿着校服逛酒吧

最新推荐文章于 2022-04-23 16:03:29 发布

阅读量747

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： ios

本文链接：https://blog.youkuaiyun.com/CXX7788/article/details/103417792

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在前端开发中判断用户设备类型（Android、iOS）的方法，并针对iOS设备进行了特定的响应式处理，如解决输入框聚焦导致的页面滚动问题。此外，还提供了检查是否在微信内置浏览器打开网页的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

methods: {

device: function () { //判断手机类型
const u = navigator.userAgent; //用户代理，声明了浏览器用于 HTTP 请求的用户代理头的值 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid)
return 'android';
if (isiOS)
return 'ios';
},

}，

mounted: function mounted() {
var that = this;
this.$nextTick(function () {
if (this.device() === 'ios') {
$("input").each(function () { //只能遍历jquery对象指的是dom对象及input
$(this).blur(function () { //当元素失去焦点时发生 blur 事件。
window.scroll(0, 0); //设置滚动条滚动到顶部
})
})
}

})

created: function created() {

var useragent = navigator.userAgent; //通过userAgent是否包含MicroMessenger来判断是否在微信内置浏览器打开网页
if (useragent.match(/MicroMessenger/i) != "MicroMessenger") {
return false;
}