微信网页端软键盘收起点击事件失效

撂倒小南瓜

于 2020-03-10 16:19:48 发布

阅读量428

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_36359904/article/details/104776757

版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种解决微信浏览器中网页点击事件错位的问题，该问题由微信Bug引起，当软键盘收起时页面未能正确复位。提供了解决方案，包括使用Vue全局指令和纯JS代码实现页面滚动位置的重置。

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

事件失效原因

因微信Bug，导致网页在软键盘收起时页面未复位，导致点击事件错位出现无法点击的情况

解决方法

vue可以使用directives做一个全局指令

Vue.directive('reset-scroll', {
    bind: (el, binding) => {
        el.onblur = () => {
            document.body.scrollTop = 0 // 如果没有效果可以使用window.scrollTo(0, 0)代替
        }
    }
})

纯js

const inputs = document.getElementsByTagName('input')
inputs.addEventListener('blur', function() {
	document.body.scrollTop = 0 // 如果没有效果可以使用window.scrollTo(0, 0)代替
})