标签:height 一个 text origin === als UNC lis 需要
根据键盘的展开和收起我们可以判断页面的可视区域的高度来操作,具体代码是这样的
const originHeight = document.documentElement.clientHeight || document.body.clientHeight; window.addEventListener(‘resize‘, () => { const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if (resizeHeight < originHeight) { console.log(‘键盘弹起‘) } else { this.$refs.input.blur() console.log(‘键盘关闭‘) } }, false);
通过判断页面的高度我可以可以处理一下问题
1. 当键盘收起的时候让表单失去焦点(注:iOS键盘收起表单会自动失去焦点,但是安卓键盘收起并不会让表单失去焦点)
2. 当键盘展开时让页面滚动,防止内容被遮挡起来导致页面无法操作
解决了表单的失去焦点问题,其实表单还有一个问题就是,需要让input滚动到可视区域,方便用户正常输入,可以使用下面代码解决
window.addEventListener(‘resize‘, function() { if( document.activeElement.tagName === ‘INPUT‘ || document.activeElement.tagName === ‘TEXTAREA‘ ) { window.setTimeout(function() { if(‘scrollIntoView‘ in document.activeElement) { document.activeElement.scrollIntoView(); } else { document.activeElement.scrollIntoViewIfNeeded(); } }, 0); } });
标签:height 一个 text origin === als UNC lis 需要
原文地址:https://www.cnblogs.com/wuxianqiang/p/10538757.html