uniapp微信公众号密码输入框输入完成后留下空白区域的问题解决方案

m0_46961166

于 2024-04-15 15:46:14 发布

阅读量229

点赞数 2

文章标签： uni-app 微信前端

本文链接：https://blog.csdn.net/m0_46961166/article/details/137783817

版权

本文介绍了一个使用JavaScript解决网页在用户输入密码时因软键盘弹出导致页面布局变化的问题。通过监听focusin和focusout事件，当软键盘关闭时，临时创建一个不可见的input元素来触发滚动恢复。

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

// 键盘问题
			this.bodyHeight = document.documentElement.clientHeight
			
			let timer = null
			document.body.addEventListener('focusin', (e) => { // 软键盘弹起事件
				if (timer && e.target.type !== 'button') {
					clearTimeout(timer)
					timer = null
				}
			})
			
			document.body.addEventListener('focusout', (e) => {
				if (e.target.type === 'password') {
				    timer = setTimeout(() => {
				      clearTimeout(timer)
				      timer = null
				      const nowH = document.documentElement.clientHeight
				      console.log('timeout', nowH, this.bodyHeight)
				      if (nowH < this.bodyHeight) {
				        const oinput = document.createElement('input')
				        oinput.style.width = '0px'
				        document.body.appendChild(oinput)
				        oinput.focus()
				        oinput.blur()
				        document.body.removeChild(oinput)
				      }
				    }, 500)
				}
			}) // 软键盘关闭事件